MCPcopy
hub / github.com/clauderic/dnd-kit

github.com/clauderic/dnd-kit @main sqlite

repository ↗ · DeepWiki ↗
1,320 symbols 3,094 edges 592 files 93 documented · 7%
README

@dnd-kit – the modern toolkit for building drag & drop interfaces

A 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 (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), 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 @dnd-kit/dom/sortable, a thin layer built on top of the core.

Getting started

Choose your preferred framework to get started:

JavaScript Vanilla Build drag and drop interfaces using plain JavaScript React React Build drag and drop interfaces using React components and hooks
Vue Vue Build drag and drop interfaces using Vue composables and components Svelte Svelte Build drag and drop interfaces using Svelte primitives and components
SolidJS 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
@dnd-kit/abstract npm Abstract core
@dnd-kit/collision npm Collision detection
@dnd-kit/dom npm Framework-agnostic DOM layer
@dnd-kit/geometry npm Geometry utilities
@dnd-kit/helpers npm Helper functions
@dnd-kit/react npm React adapter
@dnd-kit/solid npm SolidJS adapter
@dnd-kit/state npm Reactive state management
@dnd-kit/svelte npm Svelte adapter
@dnd-kit/vue npm Vue adapter

Contributing

This is a monorepo managed with Turborepo and bun.

# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev

License

MIT

Extension points exported contracts — how you extend this code

Instance (Interface)
(no doc) [4 implementers]
packages/react/src/core/hooks/useInstance.ts
Instance (Interface)
(no doc) [4 implementers]
packages/solid/src/core/hooks/useInstance.ts
Instance (Interface)
(no doc) [4 implementers]
packages/svelte/src/core/hooks/createInstance.svelte.ts
Instance (Interface)
(no doc) [4 implementers]
packages/vue/src/core/hooks/useInstance.ts
EventListenerDescriptor (Interface)
(no doc) [3 implementers]
packages/dom/src/utilities/event-listeners/Listeners.ts
Options (Interface)
* Options for configuring an axis modifier. * * @property axis - The axis to restrict movement to ('x' or 'y') * @pro
packages/abstract/src/modifiers/axis.ts
ParamFieldProps (Interface)
* Lightweight ParamField + ParamHead. Zero @mintlify/components dependency.
apps/docs/src/components/ParamField.tsx
DefineRequest (Interface)
(no doc)
packages/storybook-addon-codesandbox/src/define.ts

Core symbols most depended-on inside this repo

move
called by 80
packages/helpers/src/move.ts
addEventListener
called by 73
packages/abstract/src/core/manager/events.ts
move
called by 50
apps/stories-shared/tests/fixtures.ts
waitForDrop
called by 41
apps/stories-shared/tests/fixtures.ts
from
called by 38
packages/geometry/src/point/Point.ts
register
called by 36
packages/vue/src/core/hooks/useInstance.ts
useSortable
called by 35
packages/vue/src/sortable/useSortable.ts
get
called by 34
packages/state/src/store.ts

Shape

Function 708
Method 287
Interface 174
Class 146
Enum 5

Languages

TypeScript100%

Modules by API surface

packages/dom/src/sortable/sortable.ts46 symbols
apps/stories-shared/tests/fixtures.ts28 symbols
apps/stories/stories/react/Resizeable/Resizeable.tsx26 symbols
packages/dom/src/core/sensors/pointer/PointerSensor.ts21 symbols
packages/geometry/src/shapes/Rectangle.ts20 symbols
packages/abstract/tests/plugin-registry.test.ts20 symbols
packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts15 symbols
packages/dom/src/core/plugins/stylesheet/StyleInjector.ts14 symbols
apps/docs/src/components/mintlify/Callout.tsx14 symbols
packages/dom/src/core/sensors/drag/DragSensor.ts12 symbols
packages/dom/src/core/plugins/feedback/Feedback.ts12 symbols
packages/abstract/src/core/manager/events.ts12 symbols

Dependencies from manifests, versioned

@ai-sdk/react3.0.70 · 1×
@astrojs/mdx4.3.1 · 1×
@astrojs/react5.0.3 · 1×
@astrojs/sitemap3.7.2 · 1×
@changesets/changelog-github0.5.1 · 1×
@changesets/cli2.29.2 · 1×
@codesandbox/sandpack-react2.20.0 · 1×
@dnd-kit/abstract0.5.0 · 1×
@dnd-kit/collision0.5.0 · 1×
@dnd-kit/dom0.5.0 · 1×
@dnd-kit/eslint-config* · 1×
@dnd-kit/geometry0.5.0 · 1×

For agents

$ claude mcp add dnd-kit \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact