Atoms

Sortable

Drag-and-drop sortable list built on dnd-kit with keyboard and screen reader support.

FormanceCustom component built for Formance products.

Docs

Build the design system

Port sortable component

Create key-value input

Write documentation

Installation#

npx shadcn@latest add @formance/sortable

Install the following dependencies:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/modifiers @dnd-kit/utilities

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Sortable,
  SortableContent,
  SortableItem,
  SortableItemHandle,
  SortableOverlay,
} from '@/components/ui/sortable'

<Sortable
  value={items}
  onValueChange={setItems}
  getItemValue={(item) => item.id}
>
  <SortableContent>
    {items.map((item) => (
      <SortableItem key={item.id} value={item.id}>
        <SortableItemHandle asChild>
          <button>Drag</button>
        </SortableItemHandle>
        {item.label}
      </SortableItem>
    ))}
  </SortableContent>
  <SortableOverlay />
</Sortable>

Examples#

Horizontal#

React

TypeScript

Tailwind

Next.js

Compound Components

Compose the pieces you need:

<Sortable />Root provider with value, onValueChange, orientation, and flatCursor.

<SortableContent />Wraps the sortable list items with SortableContext.

<SortableItem />Individual draggable item with transform and transition.

<SortableItemHandle />Drag handle trigger for a sortable item.

<SortableOverlay />Drag overlay rendered in a portal during drag.

Command Menu