@dnd-kit/core

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

@dnd-kit/core

React

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

npmGitHubDocs

Fit

Bundle (gzip)

14.2 kB

43.7 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Most drag-and-drop libraries are heavy, poorly accessible, and tightly coupled to DOM structure. Adding keyboard navigation or custom collision detection requires fighting the library's internals.

What It Does

@dnd-kit provides composable primitives — DndContext, useDraggable, and useDroppable — that you wire up to your existing markup. It handles pointer, touch, and keyboard events out of the box, and lets you plug in any collision detection algorithm.

Installation

bash
npm install @dnd-kit/core @dnd-kit/sortable

Usage Example

tsx
import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';

function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
  return (
    <div ref={setNodeRef} {...attributes} {...listeners}>
      {id}
    </div>
  );
}

export function SortableList({ items }: { items: string[] }) {
  return (
    <DndContext collisionDetection={closestCenter}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map((id) => <SortableItem key={id} id={id} />)}
      </SortableContext>
    </DndContext>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

input-otpReact

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.