Modern drag and drop toolkit for React - sortable lists, Kanban boards, and more
Use the /design import command to add dnd-kit components to your project
/design import dnd-kit SortableListInstalls dependencies and creates component wrapper
Available components:
Why dnd-kit is the modern choice for drag and drop
Zero dependencies, ~10kb minified. Only load what you need.
Built-in keyboard support, screen reader friendly, ARIA attributes included.
Minimal DOM mutations, optimized for smooth animations on all devices.
Works seamlessly with mouse, touch, and keyboard inputs.
Drag and drop to reorder items in a vertical or horizontal list
Not yet imported
/design import dnd-kit SortableListPerfect for: Task lists, navigation menus, priority queues
Multi-column board with drag and drop between columns
Not yet imported
/design import dnd-kit KanbanBoardPerfect for: Project boards, workflow management, task organization
Reorderable grid layout for images, cards, or tiles
Not yet imported
/design import dnd-kit SortableGridPerfect for: Photo galleries, dashboard widgets, card layouts
Standalone draggable component for custom implementations
Not yet imported
/design import dnd-kit DraggableCardPerfect for: Custom drag interactions, modals, floating elements
dnd-kit is modular. Components use @dnd-kit/core for basic functionality and @dnd-kit/sortable for sortable presets.
All components include keyboard navigation (Space to pick up, Arrow keys to move, Esc to cancel). Screen reader announcements are built-in.
Components use our design system via Tailwind classes. Drag overlays, drop indicators, and animations respect light/dark mode automatically.