Sortable

Drag and drop list managers powered by SortableJS, ideal for visual task lists, kanban nodes, and layouts rearranging.

Preview & Interactive Laboratory

Interactive Draggable List

Task 1: Resolve high latency router nodes

Cross-chain gas slippage threshold optimization.

Task 2: Overhaul client payment checkout flow

Redesign standard stripe forms with glass styling.

Task 3: Finalize premium documentation sheets

Draft visual previews for offcanvas and skeleton.

Usage & Implementation

import { SortableList, SortableItem } from "@/components/ui/sortable"

<SortableList>
  <SortableItem className="p-4 border rounded-3xl">
    Item 1
  </SortableItem>
  <SortableItem className="p-4 border rounded-3xl">
    Item 2
  </SortableItem>
</SortableList>

React / Tailwind

Granular Customization

Sortable List Grid

Configures outer layout container holding drag targets.

className={`className='grid gap-3'`}

Draggable Element

Contains individual drag nodes and handles grab cursor triggers.

className={`className`}

API Reference (Props)

Prop	Type	Default	Description
options	SortableJS.Options	undefined	Standard SortableJS parameter attributes (animation, ghostClass).
onSort	function	undefined	Event callback called when drag reordering completes.