Component
Sortable
Reorders a list by dragging, with keyboard and pointer support. Controlled and headless — compose it into reorderable lists, sortable rows, or multi-column boards.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/sortableExamples
Live previews render through the docs app's PandaCSS codegen.
<SortableDemo />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `items` | `T[]` | Yes | - | The ordered items. Each needs a stable \`id\`; this is the source of truth. |
| `onReorder` | `(items: T[]) => void` | Yes | - | Called with the reordered array when a drag settles into a new position. |
| `children` | `ReactNode` | Yes | - | The \`Sortable.Item\`s, one per entry in \`items\`. |
| Prop | Type | Required | Default | Description |
| `label` | `string` | No | - | Accessible label for the drag handle (i18n). Default \`'Drag to reorder'\`. |
| Prop | Type | Required | Default | Description |
| `id` | `SortableId` | Yes | - | Stable identifier matching the corresponding entry in \`items\` (dnd-kit id). |
| `index` | `number` | Yes | - | The item's current position in \`items\`. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/sortable.json`
- Recipe: `sortable`
- Files: `src/components/ui/sortable.tsx`