Reorderable list
Organize items with direct drag and drop.
pnpm dlx shadcn@latest add @uiarc/reorderable-listLive · keyboard ready
- Short user-ordered lists such as priorities or a playlist.
- Lists that must be reorderable by keyboard as well as by drag.
- Use sortable-data-table when order comes from a column.
- Use swipe-actions when rows need quick actions rather than reordering.
Installation
Add Reorderable list with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/reorderable-listAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { useState } from "react";import { ReorderableList } from "@/components/arc/reorderable-list/reorderable-list"; export function Priorities() { const [items, setItems] = useState([ { id: "a", title: "Ship pricing page", detail: "Due Friday" }, { id: "b", title: "Fix login redirect" }, { id: "c", title: "Write changelog" }, ]); return <ReorderableList items={items} onReorder={setItems} label="Priorities" />;}ReorderableList
A vertical list reordered by dragging a grip handle or with arrow keys.
PropTypeDefaultDescription
itemsRequired{ id: string; title: string; detail?: string }[]–Items in their current order.onReorderRequired(items: ReorderableItem[]) => void–Called with the new order on drag or keyboard move.labelstring"Reorder items"Accessible name for the list.- ArrowUporArrowDown
- On a handle, moves that item one place up or down.
- Each handle is a button labelled like "Reorder Ship pricing page. Position 1 of 3. Use arrow keys."
- Focus stays on the moved item's handle after a keyboard move.
- Only the handle starts a drag, so text in rows stays selectable.
- Rows lift slightly on press and neighbors slide on a spring while dragging.
- The position number rolls in the direction the row moved.
- Reduced motion keeps pointer following but lands rows instantly without lift.
- Only the 36px grip starts a drag and it sets touch-action none, so the rest of the row scrolls the page normally on touch.
- Rows fill the width and keep a 56px minimum height.
- Built on motion Reorder with layout animation per row; not virtualized, so keep lists short.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for short, user-ordered lists such as priorities or playlist order. Use sortable-data-table when order comes from a column.
- It is controlled: store items in state and persist the order from onReorder.
The full library index for assistants is at /llms.txt.
Metric tickerProComponentA strip of live KPIs that roll to new values digit by digit and flash their change; rest on one to pause the strip and open its recent trend as a sparkline.Split barProComponentA single 100% bar split into shares: rest on a segment to widen it and read its exact figures, toggle segments from the legend and the rest reflow, with labels inside when they fit and on leader lines when they don't.Data gridProComponentA spreadsheet grid with range selection, inline editing, a fill handle, and animated sorting.