CLI setup for DnD code on this page
If you copy code from the Snippet or Component tabs, run the command below first. It scaffolds AfnoUI, installs the pointer-event DnD primitives at components/dnd/*, and pulls the runtime deps the snippets import (lucide-react, clsx, tailwind-merge).
Alternatively, install a ready-made demo with afnoui add dnd/<variant>. That command pulls the DnD primitives and the variant's example file (under dnd/<variant>/, a sibling of components/) in one go — you don't need to run the init step separately.
Install with:
npx afnoui init --dnd Custom Pointer DnD
Sortable list
Vertical reorder with a real-sized 'make-room' gap matching the dragged card.
axis: y
make-room
single render
Install with:
npx afnoui add dnd/sortable-listSortable list
Write product spec
Design system audit
Refactor DnD primitives
Ship release notes
Sync with design
Drag any row to reorder. Cards shift to make room at the drop position.