Drag-to-reorder list on dnd-kit: pointer and keyboard sorting, handle or whole-item dragging, and controls inside items that stay clickable.
'use client';
import { Sortable, SortableHandle, SortableItem } from '@/components/ui/sortable';
import * as React from 'react';
const tags = ['react', 'tailwind', 'radix', 'cmdk', 'lucide'];
export default function SortableDemo() {
const tasks = {
'design-review': 'Design review with the product team',
'fix-onboarding': 'Fix onboarding empty state',
'ship-registry': 'Ship the registry build pipeline',
'write-changelog': 'Write the release changelog',
};
const [taskOrder, setTaskOrder] = React.useState(Object.keys(tasks));
const [tagOrder, setTagOrder] = React.useState(tags);
return (
<div className="grid w-full max-w-2xl gap-8">
<div className="grid gap-4">
<p className="text-xs text-muted-foreground uppercase">Tasks</p>
<Sortable value={taskOrder} onValueChange={setTaskOrder}>
{Object.entries(tasks).map(([id, title]) => (
<SortableItem key={id} value={id}>
<SortableHandle />
<span className="flex-1 truncate">{title}</span>
<span className="font-mono text-[10px] text-muted-foreground">{id}</span>
</SortableItem>
))}
</Sortable>
<p className="font-mono text-[10px] text-muted-foreground">order: [{taskOrder.join(', ')}]</p>
</div>
<div className="grid gap-4">
<p className="text-xs text-muted-foreground uppercase">Tags</p>
<Sortable orientation="horizontal" value={tagOrder} onValueChange={setTagOrder}>
{tags.map((tag) => (
<SortableItem key={tag} value={tag}>
{tag}
</SortableItem>
))}
</Sortable>
<p className="font-mono text-[10px] text-muted-foreground">order: [{tagOrder.join(', ')}]</p>
</div>
<div className="grid gap-4">
<p className="text-xs text-muted-foreground uppercase">Disabled item</p>
<Sortable defaultValue={['draft', 'locked', 'review', 'published']} className="max-w-sm">
<SortableItem value="draft">
<SortableHandle />
Draft
</SortableItem>
<SortableItem value="locked" disabled>
<SortableHandle />
Locked (disabled)
</SortableItem>
<SortableItem value="review">
<SortableHandle />
In review
</SortableItem>
<SortableItem value="published">
<SortableHandle />
Published
</SortableItem>
</Sortable>
</div>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.