ReUIReUI
2.5kX

Sortable

A drag-and-drop sortable component designed for seamless item reordering with vertical, grid, and nested layouts.

Radix UIBase UI
"use client"

import { useState } from "react"

Installation

pnpm dlx shadcn@latest add @reui/sortable

Usage

import {
  Sortable,
  SortableItem,
  SortableItemHandle,
} from "@/components/reui/sortable"
<Sortable
  value={items}
  onValueChange={setItems}
  getItemValue={(item) => item.id}
>
  {items.map((item) => (
    <SortableItem key={item.id} value={item.id}>
      <SortableItemHandle>
        <GripVertical />
      </SortableItemHandle>
      {item.content}
    </SortableItem>
  ))}
</Sortable>

Examples

Grid

"use client"

import { useState } from "react"

Nested

"use client"

import { useState } from "react"

API Reference

Sortable

The root component that manages the sortable state and drag-and-drop context.

PropTypeDefaultDescription
valueT[]-Required. The array of items to sort.
onValueChange(value: T[]) => void-Required. Callback fired when items are reordered.
getItemValue(item: T) => string-Required. Function to extract a unique ID from an item.
layout"vertical" | "grid" | "nested""vertical"The visual layout of the sortable list.
classNamestring-Additional CSS classes for the container.

SortableItem

An individual draggable item within the sortable list.

PropTypeDefaultDescription
valuestring-Required. The unique identifier for the item.
disabledbooleanfalseWhether the item is draggable.
classNamestring-Additional CSS classes for the item.

SortableItemHandle

The drag handle for an individual sortable item.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the handle.