Search for a command to run...
The <Sortable /> component is built on top of @dnd-kit's sortable preset.
pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/sortable.jsonimport {
Sortable,
SortableGrid,
SortableItem,
SortableItemTrigger,
SortableList,
SortableOverlay,
} from "@/components/ui/sortable";<Sortable>
<SortableList>
<SortableItem>
<SortableItemTrigger />
</SortableItem>
</SortableList>
<SortableGrid>
<SortableItem>
<SortableItemTrigger />
</SortableItem>
</SortableGrid>
<SortableOverlay />
</Sortable>Tip: When working with database records, items typically include their own id field. To prevent conflicts with useFieldArray's generated IDs:
Use keyName prop in useFieldArray to specify another name for the temporary ID (e.g., _id).
const { fields, move } = useFieldArray({
control: form.control,
name: "items",
keyName: "_id",
});Pass the temporary IDs to <SortableList /> or <SortableGrid />'s items prop to maintain the correct sort order during reordering.
<SortableList items={fields.map((field) => field._id)} />