About dnd kit
dnd kit is an extensible drag and drop toolkit written in TypeScript. It works with plain TypeScript and with React, Vue, Svelte and Solid.
What it does
dnd kit gives you building blocks for draggable items, drop targets and sortable lists. A central manager coordinates each drag operation. Sensors handle mouse, touch and keyboard input, and modifiers can constrain movement. Plugins add new behaviors when the defaults are not enough.
Key features
- Draggable, droppable and sortable building blocks
- Sensors for mouse, touch and keyboard input
- Modifiers to constrain or transform movement
- Plugin system for new behaviors
- Works in any layout or direction
Who it's for
Developers building Kanban boards, sortable lists, file organizers or any interface where users rearrange items with a pointer or keyboard.
Pricing and good to know
dnd kit is open source under the MIT license and free to use. It is a toolkit rather than a finished component set, so you write the layout and styling yourself. Test drag behavior on touch screens, since touch and keyboard sensors can need different settings.
Highlights
- Draggable, droppable and sortable parts
- Sensors for mouse, touch and keyboard
- Modifiers to constrain movement
- Plugin system for new behaviors
- Works in any layout or direction
