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.