Blitz UIBlitz UIAlpha
X

Sortable

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

Package
shadcn/ui
"use client"

import { useState } from "react"

Installation

pnpm dlx shadcn@latest add @blitz-ui/sortable

Usage

import { Sortable, SortableItem, SortableItemHandle } from "@blitz-ui/react/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.