A drag-and-drop sortable component designed for seamless item reordering with vertical, grid, and nested layouts.
"use client"
import { useState } from "react"Installation
pnpm dlx shadcn@latest add @reui/r-sortable
Usage
import {
Sortable,
SortableItem,
SortableItemHandle,
} from "@/components/reui/r-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.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T[] | - | 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. |
className | string | - | Additional CSS classes for the container. |
SortableItem
An individual draggable item within the sortable list.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Required. The unique identifier for the item. |
disabled | boolean | false | Whether the item is draggable. |
className | string | - | Additional CSS classes for the item. |
SortableItemHandle
The drag handle for an individual sortable item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the handle. |