Search for a command to run...
Sortable provides a way to sort items in a list or grid.
The <Sortable /> component is built on top of @dnd-kit's sortable preset.
<Sortable />
pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/sortable.json
import { 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:
id
useFieldArray
Use keyName prop in useFieldArray to specify another name for the temporary ID (e.g., _id).
keyName
_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 />
<SortableGrid />
items
<SortableList items={fields.map((field) => field._id)} />
Phone Input allows user to enter phone number in E.164 format.
A virtualizer component that allows you to efficiently render large lists and tabular data.