ReUIReUI
2.7kX

Shadcn Sortable

Custom Shadcn Sortable for React and Tailwind CSS. A drag-and-drop sortable component designed for seamless item reordering with vertical, grid, and nested layouts.

Radix UIBase UI
Radix UI
"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.

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.

More Shadcn Sortable components

Browse 7 production-ready Shadcn Sortable components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 7 Shadcn Sortable components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.