Generative UI
Sortable List
Drag to reorder list for React and shadcn/ui built on Motion Reorder, with checkboxes and item deletion, for task lists.
Updated
SortableList is an animated React list component for shadcn/ui built on the Motion Reorder API. Use it for task lists, playlist editors, onboarding checklists, or any interface where users rearrange items.
References
Inspiration
Installation
pnpm dlx shadcn@latest add @cult-ui/sortable-list
Usage
export default function Example() {
const [items, setItems] = useState<Item[]>([
{ text: "Item 1", checked: false, id: 1, description: "Description 1" },
{ text: "Item 2", checked: false, id: 2, description: "Description 2" },
{ text: "Item 3", checked: false, id: 3, description: "Description 3" },
]);
const handleAddItem = () => {
const newItem: Item = {
text: `Item ${items.length + 1}`,
checked: false,
id: items.length + 1,
description: `Description ${items.length + 1}`,
};
setItems([...items, newItem]);
};
const handleResetItems = () => {
setItems([]);
};
const handleCompleteItem = (id: number) => {
setItems((prevItems) =>
prevItems.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
)
);
};
const handleRemoveItem = (id: number) => {
setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};
const renderItem = (
item: Item,
onCompleteItem: (id: number) => void,
onRemoveItem: (id: number) => void
) => (
<SortableListItem
key={item.id}
item={item}
onCompleteItem={onCompleteItem}
onRemoveItem={onRemoveItem}
handleDrag={() => {}}
/>
);
return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">Sortable List Example</h1>
<SortableList
items={items}
setItems={setItems}
onAddItem={handleAddItem}
onResetItems={handleResetItems}
onCompleteItem={handleCompleteItem}
renderItem={renderItem}
/>
</div>
);
}