Fabric UI

Sortable

Fabric UI Sortable component 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 @fabric-ui/r-sortable

Usage

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

Browse 7 production-ready Sortable components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.

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