> ## Documentation Index
> Fetch the complete documentation index at: https://dndkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Learn how to build drag and drop interfaces with <span class="inline-logo">**dnd kit**</span>

## Key features

* **Framework agnostic**: First-class support for React, Vue, Svelte, Solid, and TypeScript
* **Batteries included**: Drag, drop, sort, and reorder in any layout or direction
* **Fully extensible**: Plugins, sensors, and modifiers for complete control
* **Production ready**: Built for performance, accessibility, and reliability

## Getting started

Choose your preferred framework to get started:

<CardGroup cols={2}>
  <Card title="TypeScript" icon="ts" href="/quickstart">
    Build drag and drop interfaces using plain TypeScript
  </Card>

  <Card title="React" icon="react" href="react/quickstart">
    Build drag and drop interfaces using React components and hooks
  </Card>

  <Card title="Vue" icon="vuejs" href="vue/quickstart">
    Build drag and drop interfaces using Vue composables and components
  </Card>

  <Card title="Svelte" icon="svelte" href="svelte/quickstart">
    Build drag and drop interfaces using Svelte primitives and components
  </Card>

  <Card title="Solid" icon="solidjs" href="solid/quickstart">
    Build drag and drop interfaces using SolidJS hooks and components
  </Card>
</CardGroup>

## Core Concepts

Learn the essential building blocks:

<CardGroup cols={2}>
  <Card title="Manager" icon="sitemap" href="concepts/drag-drop-manager">
    The central orchestrator that coordinates drag and drop operations
  </Card>

  <Card title="Draggable" icon="bullseye-pointer" href="concepts/draggable">
    Elements that can be picked up and dragged to new locations
  </Card>

  <Card title="Droppable" icon="expand" href="concepts/droppable">
    Target areas where draggable elements can be dropped
  </Card>

  <Card title="Sortable" icon="layer-group" href="concepts/sortable">
    Draggable elements that can be reordered within and across lists
  </Card>
</CardGroup>

## Extend and customize

Make it your own with powerful extension points:

<CardGroup cols={2}>
  <Card title="Plugins" icon="cube" href="extend/plugins">
    Add new features and behaviors with the plugin system
  </Card>

  <Card title="Sensors" icon="signal-stream" href="extend/sensors">
    Support different input methods like mouse, touch, and keyboard
  </Card>

  <Card title="Modifiers" icon="sliders" href="extend/modifiers">
    Modify drag behavior with constraints and transformations
  </Card>
</CardGroup>

## Sponsors

<div className="sponsors">
  <Frame>
    <a href="https://sentry.io/" target="_blank" aria-label="Sentry">
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/sentry-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=798fce0d7e066a189349bead2d5536d1" alt="Sentry" style={{width: 180, height: 80, pointerEvents: "none"}} width="400" height="119" data-path="images/sponsors/sentry-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/sentry-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=fc5379c7a14673e0a73b906a9c17f9bf" alt="Sentry" style={{width: 180, height: 80, pointerEvents: "none"}} width="400" height="119" data-path="images/sponsors/sentry-logo-dark.svg" />
    </a>
  </Frame>

  <Frame>
    <a href="https://www.any.do/" target="_blank" aria-label="Any.do">
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/any-do-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=7729fdaafb637cf995250ddf46ea787f" alt="Any.do" style={{width: 120, height: 80, pointerEvents: "none"}} width="118" height="32" data-path="images/sponsors/any-do-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/any-do-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=4035969d4e5c30e7567b825979888c09" alt="Any.do" style={{width: 120, height: 80, pointerEvents: "none"}} width="118" height="32" data-path="images/sponsors/any-do-logo-dark.svg" />
    </a>
  </Frame>

  <Frame>
    <a href="https://doist.com/" target="_blank" aria-label="Doist">
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/doist-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=830b0babae386747a696be9335566f2f" alt="Doist" style={{width: 90, height: 80, pointerEvents: "none"}} width="59" height="33" data-path="images/sponsors/doist-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/doist-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=932f2fb2577d171f70c58cdd95c7c9d2" alt="Doist" style={{width: 90, height: 80, pointerEvents: "none"}} width="59" height="33" data-path="images/sponsors/doist-logo-dark.svg" />
    </a>
  </Frame>

  <Frame>
    <a href="https://puckeditor.com/" target="_blank" aria-label="Puck" style={{position: "relative", top: 4}}>
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/puck-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=0e03676a67cae68ef2458ebcb0743d72" alt="Puck" style={{width: 130, height: 80, pointerEvents: "none"}} width="1300" height="326" data-path="images/sponsors/puck-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/puck-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=008422bd99fa62ca5bd874f3abf4a749" alt="Puck" style={{width: 130, height: 80, pointerEvents: "none"}} width="1300" height="326" data-path="images/sponsors/puck-logo-dark.svg" />
    </a>
  </Frame>

  <Frame>
    <a href="https://httpie.io/" target="_blank" aria-label="HTTPie">
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/httpie-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=a7f4569db0c01e3342563b482093bafc" alt="HTTPie" style={{width: 120, height: 80, pointerEvents: "none"}} width="1635" height="470" data-path="images/sponsors/httpie-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/httpie-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=38d80f11c043c407f234252c2c7df294" alt="HTTPie" style={{width: 120, height: 80, pointerEvents: "none"}} width="1635" height="470" data-path="images/sponsors/httpie-logo-dark.svg" />
    </a>
  </Frame>

  <Frame>
    <a href="https://mintlify.com/" target="_blank" aria-label="Mintlify">
      <img className="dark:hidden" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/mintlify-logo.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=9f9d137c453ef0a7856fa30e2ec63c66" alt="Mintlify" style={{width: 140, height: 80, pointerEvents: "none"}} width="2191" height="484" data-path="images/sponsors/mintlify-logo.svg" />

      <img className="hidden dark:block" src="https://mintcdn.com/dnd-kit/rEYJHsL1jSwxik0X/images/sponsors/mintlify-logo-dark.svg?fit=max&auto=format&n=rEYJHsL1jSwxik0X&q=85&s=34c94519e36a803ee2736c12d4558e74" alt="Mintlify" style={{width: 140, height: 80, pointerEvents: "none"}} width="2191" height="484" data-path="images/sponsors/mintlify-logo-dark.svg" />
    </a>
  </Frame>
</div>
