Yami

Sortable

Drag-and-drop sortable lists built with DnD Kit.

Item 1
Item 2
Item 3

Installation

Add the sortable component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/sortable.json

Usage

"use client"

import * as React from "react"

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

export function SortableList() {
  const [items, setItems] = React.useState(["Item 1", "Item 2", "Item 3"])

  return (
    <Sortable value={items} onValueChange={setItems}>
      <SortableContent>
        {items.map((item) => (
          <SortableItem key={item} value={item}>
            {item}
          </SortableItem>
        ))}
      </SortableContent>
      <SortableOverlay />
    </Sortable>
  )
}

Examples

Default

Item 1
Item 2
Item 3

Code

"use client"

import * as React from "react"

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

export function SortableList() {
  const [items, setItems] = React.useState(["Item 1", "Item 2", "Item 3"])

  return (
    <Sortable value={items} onValueChange={setItems}>
      <SortableContent>
        {items.map((item) => (
          <SortableItem key={item} value={item}>
            {item}
          </SortableItem>
        ))}
      </SortableContent>
      <SortableOverlay />
    </Sortable>
  )
}