clauderic / dnd-kit
The modern toolkit for building drag and drop interfaces
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing clauderic/dnd-kit in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Overview (README excerpt)
Crawler viewA modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web Features • **Framework agnostic core:** The architecture is built in layers — a framework-agnostic core ( ), a DOM implementation ( ), and thin adapters for your framework of choice. • **Supports a wide range of use cases:** lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D games, and more. • **Built-in support for multiple input methods:** Pointer, mouse, touch and keyboard sensors. • **Fully customizable & extensible:** Customize every detail — animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and more. • **Accessibility:** Keyboard support, sensible default ARIA attributes, customizable screen reader instructions and live regions built-in. • **Performance:** Built with performance in mind to support silky smooth animations. • **Sortable:** Need to build a sortable interface? Check out , a thin layer built on top of the core. Getting started Choose your preferred framework to get started: Vanilla Build drag and drop interfaces using plain JavaScript React Build drag and drop interfaces using React components and hooks Vue Build drag and drop interfaces using Vue composables and components Svelte Build drag and drop interfaces using Svelte primitives and components Solid Build drag and drop interfaces using SolidJS hooks and components Documentation Visit **dndkit.com** for full documentation, API reference, guides, and interactive examples. Packages | Package | Version | Description | | ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- | | | | Abstract core | | | | Collision detection | | | | Framework-agnostic DOM layer | | | | Geometry utilities | | | | Helper functions | | | | React adapter | | | | SolidJS adapter | | | | Reactive state management | | | | Svelte adapter | | | | Vue adapter | Contributing This is a monorepo managed with Turborepo and bun. License MIT