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.
npx afnoui init --dndDnD variants
Live preview of every drag-and-drop interaction, each on its own page. All demos are built on the in-house pointer DnD library at @/components/ui/dnd — no @dnd-kit, no react-beautiful-dnd.
Drag any row to reorder. Cards shift to make room at the drop position.
Available (4)
Selected (1)
Loose files
Company Type
Company field configuration