# @dnd-kit/collision

Latest version **0.5.1** (published 2026-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dnd-kit/collision
pnpm add @dnd-kit/collision
yarn add @dnd-kit/collision
bun add @dnd-kit/collision
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2026-10-15 |
| First published | 2024-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 17723 |
| Maintainers | clauderic |

## Links

- npm: https://www.npmjs.com/package/@dnd-kit/collision
- Repository: https://github.com/clauderic/dnd-kit
- Homepage: https://github.com/clauderic/dnd-kit#readme
- Issues: https://github.com/clauderic/dnd-kit/issues
- npm.io page: https://npm.io/package/@dnd-kit/collision

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.6.2
- [@dnd-kit/abstract](https://npm.io/package/@dnd-kit/abstract.md) ^0.5.1
- [@dnd-kit/geometry](https://npm.io/package/@dnd-kit/geometry.md) ^0.5.1

## Recent versions

- 0.5.1 (latest) — 2026-10-15
- 0.5.1-beta-20261015120327 (beta) — 2026-10-15
- 0.5.1-beta-20261015120225 — 2026-10-15
- 0.5.1-beta-20261015120054 — 2026-10-15
- 0.5.1-beta-20261015120014 — 2026-10-15
- 0.5.1-beta-20261015115554 — 2026-10-15
- 0.5.1-beta-20261015115837 — 2026-10-15
- 0.5.1-beta-20261015115628 — 2026-10-15
- 0.5.1-beta-20261015115205 — 2026-10-15
- 0.5.1-beta-20260912195958 — 2026-09-12
- 0.5.1-beta-20260905201412 — 2026-09-05
- 0.5.1-beta-20260905153955 — 2026-09-05
- 0.5.1-beta-20260713030121 — 2026-07-13
- 0.5.1-beta-20260706002929 — 2026-07-06
- 0.5.1-beta-20260627143054 — 2026-06-27
- … 408 more at https://npm.io/package/@dnd-kit/collision/versions

## README

<p align="center">
  <a href="https://dndkit.com">
    <img alt="@dnd-kit – the modern toolkit for building drag & drop interfaces" src=".github/assets/dnd-kit-hero-banner.svg">
  </a>
</p>
<p align="center">
A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web
</p>

## 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.

<h2 align="left">Getting started</h2>

<p>
Choose your preferred framework to get started:
</p>

<br>

<table width="100%" cellpadding="32">
<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/javascript/F7DF1E" height="22" alt="JavaScript" />
<br>

<strong><a href="https://dndkit.com/quickstart">Vanilla</a></strong>

Build drag and drop interfaces using plain JavaScript
<br>

</td>

<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/react/61DAFB" height="22" alt="React" />
<br>

<strong><a href="https://dndkit.com/react/quickstart">React</a></strong>

Build drag and drop interfaces using React components and hooks
<br><br>

</td>
</tr>

<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/vue.js/4FC08D" height="22" alt="Vue" />
<br>

<strong><a href="https://dndkit.com/vue/quickstart">Vue</a></strong>

Build drag and drop interfaces using Vue composables and components
<br><br>

</td>

<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/svelte/FF3E00" height="22" alt="Svelte" />
<br>

<strong><a href="https://dndkit.com/svelte/quickstart">Svelte</a></strong>

Build drag and drop interfaces using Svelte primitives and components
<br><br>

</td>
</tr>

<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/solid/2C4F7C" height="22" alt="SolidJS" />
<br>

<strong><a href="https://dndkit.com/solid/quickstart">Solid</a></strong>

Build drag and drop interfaces using SolidJS hooks and components
<br><br>

</td>

<td width="50%" valign="top">
</td>
</tr>
</table>

## Documentation

Visit **[dndkit.com](https://dndkit.com)** for full documentation, API reference, guides, and interactive examples.

## Packages

| Package                                    | Version                                                                                          | Description                  |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |
| [`@dnd-kit/abstract`](packages/abstract)   | [![npm](https://img.shields.io/npm/v/@dnd-kit/abstract.svg)](https://npm.im/@dnd-kit/abstract)   | Abstract core                |
| [`@dnd-kit/collision`](packages/collision) | [![npm](https://img.shields.io/npm/v/@dnd-kit/collision.svg)](https://npm.im/@dnd-kit/collision) | Collision detection          |
| [`@dnd-kit/dom`](packages/dom)             | [![npm](https://img.shields.io/npm/v/@dnd-kit/dom.svg)](https://npm.im/@dnd-kit/dom)             | Framework-agnostic DOM layer |
| [`@dnd-kit/geometry`](packages/geometry)   | [![npm](https://img.shields.io/npm/v/@dnd-kit/geometry.svg)](https://npm.im/@dnd-kit/geometry)   | Geometry utilities           |
| [`@dnd-kit/helpers`](packages/helpers)     | [![npm](https://img.shields.io/npm/v/@dnd-kit/helpers.svg)](https://npm.im/@dnd-kit/helpers)     | Helper functions             |
| [`@dnd-kit/react`](packages/react)         | [![npm](https://img.shields.io/npm/v/@dnd-kit/react.svg)](https://npm.im/@dnd-kit/react)         | React adapter                |
| [`@dnd-kit/solid`](packages/solid)         | [![npm](https://img.shields.io/npm/v/@dnd-kit/solid.svg)](https://npm.im/@dnd-kit/solid)         | SolidJS adapter              |
| [`@dnd-kit/state`](packages/state)         | [![npm](https://img.shields.io/npm/v/@dnd-kit/state.svg)](https://npm.im/@dnd-kit/state)         | Reactive state management    |
| [`@dnd-kit/svelte`](packages/svelte)       | [![npm](https://img.shields.io/npm/v/@dnd-kit/svelte.svg)](https://npm.im/@dnd-kit/svelte)       | Svelte adapter               |
| [`@dnd-kit/vue`](packages/vue)             | [![npm](https://img.shields.io/npm/v/@dnd-kit/vue.svg)](https://npm.im/@dnd-kit/vue)             | Vue adapter                  |

## Contributing

This is a monorepo managed with [Turborepo](https://turbo.build/) and [bun](https://bun.sh/).

```bash
# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev
```

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/@dnd-kit/collision · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._