# clauderic/dnd-kit

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/clauderic-dnd-kit).**

16,622 stars · 840 forks · TypeScript · mit

## Links

- GitHub: https://github.com/clauderic/dnd-kit
- Homepage: http://dndkit.com
- awesome-repositories: https://awesome-repositories.com/repository/clauderic-dnd-kit.md

## Topics

`drag` `drag-and-drop` `draggable` `droppable` `react` `sortable`

## Description

This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs.

The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject custom behaviors, movement constraints, or visual transformations. By employing a centralized registry and collision-detection strategy, it enables precise control over how elements interact with defined drop zones, including support for grid snapping and axis-based movement restrictions.

Beyond core movement, the library includes comprehensive tools for managing the user experience during interactions. This includes automated screen reader announcements and accessibility attribute management to ensure interfaces remain inclusive. It also handles visual feedback through portal-based rendering, automatic container scrolling, and animated list reordering, providing a responsive interface that updates dynamically as users manipulate elements.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. ([source](https://dndkit.com))
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Enables intuitive reordering of list items through drag-and-drop interactions within single or multiple containers. ([source](https://dndkit.com/concepts/sortable))
- [Accessibility Management](https://awesome-repositories.com/f/user-interface-experience/accessibility-management.md) — Provides automated screen reader announcements and accessibility attribute management to ensure drag-and-drop interfaces remain inclusive. ([source](https://dndkit.com/extend/plugins))
- [Accessible Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/accessible-interaction-patterns.md) — Provides utilities for creating inclusive drag-and-drop experiences that handle screen reader announcements and keyboard navigation.
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Ensures inclusive interface elements through automated screen reader announcements and accessibility attribute management.
- [Drag and Drop Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions.md) — Coordinates drag-and-drop state and communication between components using a central provider. ([source](https://dndkit.com/react/quickstart))
- [Drag Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions/drag-boundary-constraints.md) — Provides configurable constraints to restrict the movement of draggable elements within specific containers or coordinate boundaries. ([source](https://dndkit.com/extend/modifiers))
- [Input Normalization Utilities](https://awesome-repositories.com/f/user-interface-experience/input-normalization-utilities.md) — Normalizes mouse, touch, and keyboard events into a unified stream of interaction commands.
- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Offers a collection of reusable primitives for managing complex state and spatial interactions in web interfaces.
- [Interaction Lifecycle Managers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions/interaction-lifecycle-managers.md) — Manages the lifecycle of drag-and-drop operations by configuring sensors, plugins, and modifiers. ([source](https://dndkit.com/concepts/drag-drop-manager))
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Limits the initiation of drag operations to specific sub-elements to prevent accidental triggers. ([source](https://dndkit.com/concepts/draggable))
- [Snapping Behaviors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/snapping-behaviors.md) — Enables precise element positioning by restricting movement to predefined grid patterns or alignment points. ([source](https://dndkit.com/extend/modifiers))
- [Drag-and-Drop Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-handlers/drag-and-drop-event-callbacks.md) — Executes custom logic and interface updates during specific phases of drag-and-drop interactions via event callbacks. ([source](https://dndkit.com/concepts/drag-drop-manager))
- [Multi-Input Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/multi-input-interaction-handlers.md) — Detects and normalizes interactions from mouse, touch, pen, and keyboard inputs for drag-and-drop operations. ([source](https://dndkit.com))
- [State Management Providers](https://awesome-repositories.com/f/user-interface-experience/state-management-providers.md) — Coordinates drag lifecycle events and synchronizes data between draggable items and drop targets using hierarchical context providers.
- [Custom Drag Behaviors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/custom-drag-behaviors.md) — Allows developers to inject custom logic or visual effects into the drag-and-drop lifecycle by attaching modular plugins. ([source](https://dndkit.com/extend/plugins))
- [Event-Driven Plugin Hooks](https://awesome-repositories.com/f/user-interface-experience/extensible-interfaces/plugin-renderers/event-driven-plugin-hooks.md) — Allows developers to inject custom logic into specific phases of the drag-and-drop interaction process via event-driven hooks.
- [Scroll Thresholds](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions/scroll-thresholds.md) — Automatically scrolls containers when dragged items approach edges to keep them visible during movement. ([source](https://dndkit.com/extend/plugins))
- [Drag Operation Controls](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls.md) — Governs the visual representation of elements during drag operations, including cloning and hiding behaviors. ([source](https://dndkit.com/concepts/draggable))
- [Drag and Drop Configurations](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-libraries/drag-and-drop-configurations.md) — Adjusts drag-and-drop movement, constraints, and transformations using a modular architecture to tailor the user experience. ([source](https://dndkit.com))
- [Interaction Modifiers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-modifiers.md) — Intercepts and adjusts coordinate data to enforce movement constraints, snapping, and custom transformation logic.
- [Input Handling](https://awesome-repositories.com/f/user-interface-experience/input-handling.md) — Implements custom sensor logic to support unique input devices and specialized interaction patterns. ([source](https://dndkit.com/extend/sensors))
- [Interactive Element Registries](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-element-registries.md) — Maintains a registry of draggable and droppable elements to enable coordinate detection and collision resolution. ([source](https://dndkit.com/concepts/drag-drop-manager))
- [Layout Animation Engines](https://awesome-repositories.com/f/user-interface-experience/layout-animation-engines.md) — Applies smooth visual transitions to elements when their order changes to provide clear feedback during layout updates. ([source](https://dndkit.com/concepts/sortable))
- [Drag Debugging Overlays](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/drag-debugging-overlays.md) — Renders debug overlays for drag shapes, drop zones, and collision boundaries to assist in troubleshooting complex interface interactions. ([source](https://dndkit.com/extend/plugins))
- [Activation Handlers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/draggable-axis-configurations/activation-handlers.md) — Enables users to initiate drag-and-drop interactions on specific interface elements by attaching movement behavior to them. ([source](https://dndkit.com/concepts/draggable))
- [Draggable Element Definitions](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/draggable-axis-configurations/draggable-element-definitions.md) — Enables interface components to be moved by assigning unique identifiers and references to the elements that users can interact with. ([source](https://dndkit.com/react/quickstart))
- [Draggable Element Registries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/draggable-axis-configurations/draggable-element-registries.md) — Registers specific elements as draggable items and attaches optional handles or toggleable states to initiate interactions. ([source](https://dndkit.com/quickstart))
- [Drop Target Registries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/drop-target-registries.md) — Restricts which drop zones can accept specific draggable items by matching their assigned types during the interaction process. ([source](https://dndkit.com/concepts/draggable))
- [Compatibility Restrictions](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/drop-target-registries/compatibility-restrictions.md) — Limits which draggable items can be placed into a specific target by validating item types against defined acceptance criteria. ([source](https://dndkit.com/concepts/droppable))
- [Interaction Feedback Effects](https://awesome-repositories.com/f/user-interface-experience/interaction-feedback-effects.md) — Coordinates visual state changes and layering animations to provide responsive feedback during drag interactions. ([source](https://dndkit.com/extend/plugins))
- [Interaction Tracking](https://awesome-repositories.com/f/user-interface-experience/interaction-tracking.md) — Maintains a centralized store of interactive components to enable efficient spatial lookups during drag operations.

### Software Engineering & Architecture

- [Interaction Customizers](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/foundational-theory-and-guidance/software-architecture-principles/user-experience-design/interaction-design-patterns/interaction-customizers.md) — Tailors drag behavior with specialized sensors, movement constraints, and collision detection to meet unique design requirements.

### Web Development

- [Optimistic Updates](https://awesome-repositories.com/f/web-development/state-management/optimistic-updates.md) — Updates the visual order of elements immediately during drag operations to ensure a responsive and fast-feeling interface. ([source](https://dndkit.com/concepts/sortable))

### Game Development

- [Collision Detection](https://awesome-repositories.com/f/game-development/physics-engines/collision-detection.md) — Calculates spatial intersections between moving elements and target zones to determine valid drop states.