Components
Loading preview...
A reorderable list component with drag and drop functionality.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/draggable-listimport { DraggableList,DraggableItem } from "@/components/ui/draggable-list"
import { useState } from "react";
const Demo = () => {
const [items, setItems] = useState([
{ id: "1", content: <DraggableItem>First Item</DraggableItem> },
{ id: "2", content: <DraggableItem>Second Item</DraggableItem> },
{ id: "3", content: <DraggableItem>Third Item</DraggableItem> },
]);
const handleReorder = (newItems: DraggableItemProps[]) => {
setItems(newItems);
// Do something with the new order
};
return (
<DraggableList
items={items}
onChange={handleReorder}
className="max-w-sm w-full"
/>
);
}
export {Demo}