║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Sortable description: A drag and drop sortable component for reordering items. preview: true links: doc: https://docs.dndkit.com/presets/sortable api: /docs/components/sortable#api-reference

<ComponentTabs name="sortable-demo" scalePreview />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/sortable"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @radix-ui/react-slot
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file.

<ComponentSource name="compose-refs" />

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="sortable" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import * as Sortable from "@/components/ui/sortable";

<Sortable.Root>
  <Sortable.Content>
    <Sortable.Item >
      <Sortable.ItemHandle />
    </Sortable.Item>
    <Sortable.Item />
  </Sortable.Content>
  <Sortable.Overlay />
</Sortable.Root>

Examples

With Dynamic Overlay

Display a dynamic overlay when an item is being dragged.

<ComponentTabs name="sortable-dynamic-overlay-demo" scalePreview />

With Handle

Use ItemHandle as a drag handle for sortable items.

<ComponentTabs name="sortable-handle-demo" />

With Primitive Values

Use an array of primitives (string or number) instead of objects for sorting.

<ComponentTabs name="sortable-primitive-values-demo" />

API Reference

Root

The main container component for sortable functionality.

<AutoTypeTable path="./types/docs/sortable.ts" name="RootProps" />

Content

Container for sortable items. Multiple SortableContent components can be used within a Sortable component.

<AutoTypeTable path="./types/docs/sortable.ts" name="ContentProps" />

Item

Individual sortable item component.

<AutoTypeTable path="./types/docs/sortable.ts" name="ItemProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the item is disabled.", }, { title: "[data-dragging]", value: "Present when the item is being dragged.", }, ]} />

ItemHandle

A button component that acts as a drag handle for sortable items.

<AutoTypeTable path="./types/docs/sortable.ts" name="ItemHandleProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the item is disabled.", }, { title: "[data-dragging]", value: "Present when the parent sortable item is being dragged.", } ]} />

The component extends the base Button component and adds the following styles:

• select-none for pointer events
• cursor-grab when not dragging (unless flatCursor is true)
• cursor-grabbing when dragging (unless flatCursor is true)
• cursor-default when flatCursor is true

Overlay

The overlay component that appears when an item is being dragged.

<AutoTypeTable path="./types/docs/sortable.ts" name="OverlayProps" />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Enter", "Space"], description: "Picks up the sortable item for reordering when released, and drops the item in its new position when pressed again.", }, { keys: ["ArrowUp"], description: "Moves the sortable item up in vertical orientation.", }, { keys: ["ArrowDown"], description: "Moves the sortable item down in vertical orientation.", }, { keys: ["ArrowLeft"], description: "Moves the sortable item left in horizontal orientation.", }, { keys: ["ArrowRight"], description: "Moves the sortable item right in horizontal orientation.", }, { keys: ["Esc"], description: "Cancels the sort operation and returns the item to its original position.", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║