# @dnd-kit/sortable

> Official sortable preset and sensors for dnd kit

Latest version **10.0.0** (published 2024-12-04) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 10.0.0 |
| Published | 2024-12-04 |
| First published | 2021-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 228.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17629 |
| Author | Claudéric Demers |
| Maintainers | clauderic |

## Links

- npm: https://www.npmjs.com/package/@dnd-kit/sortable
- 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/sortable

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@dnd-kit/utilities](https://npm.io/package/@dnd-kit/utilities.md) ^3.2.2

## Recent versions

- 10.0.0 (latest) — 2024-12-04
- 10.0.0-next-202410244445 (next) — 2024-11-24
- 9.0.0 — 2024-11-23
- 9.0.0-next-20241023165632 — 2024-11-23
- 9.0.0-next-20241023161720 — 2024-11-23
- 9.0.0-next-2024102316167 — 2024-11-23
- 9.0.0-next-2024102314261 — 2024-11-23
- 9.0.0-next-20241023141346 — 2024-11-23
- 9.0.0-next-20241023141325 — 2024-11-23
- 8.0.0 — 2023-11-06
- 8.0.0-next-2023106221355 — 2023-11-06
- 8.0.0-next-202310621567 — 2023-11-06
- 8.0.0-next-2023106211358 — 2023-11-06
- 7.0.2 — 2023-01-05
- 7.0.2-next-202304205747 — 2023-01-04
- … 97 more at https://npm.io/package/@dnd-kit/sortable/versions

## README

# @dnd-kit/sortable

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/sortable.svg)](https://npm.im/@dnd-kit/sortable)

The sortable preset provides the building blocks to build sortable interfaces with @dnd-kit.

## Installation

To get started, install the sortable preset via npm or yarn:

```
npm install @dnd-kit/sortable
```

## Architecture

The sortable preset builds on top of the primitives exposed by `@dnd-kit/core` to help building sortable interfaces.

The sortable preset exposes two main concepts: `SortableContext` and the `useSortable` hook:

- The SortableContext provides information via context that is consumed by the `useSortable` hook.
- The useSortable hook is an abstraction that composes the `useDroppable` and `useDraggable` hooks.

![The useSortable hook is an abstraction that composes the useDroppable and useDraggable hooks](/.github/assets/use-sortable.png)

## Usage

Visit [docs.dndkit.com](https://docs.dndkit.com/presets/sortable) to learn how to use the Sortable preset.

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