Components

Sortable (Radix UI)

A drag-and-drop sortable component designed for seamless item organization across customizable columns.

Installation

pnpm dlx shadcn@latest add @toui/sortable

Examples

Grid

Nested

API Reference

The Sortable component is a flexible drag-and-drop component for organizing items in lists. Below is the complete API reference:

Sortable

The root Sortable component includes the following props:

PropTypeDefault
value T[]
onValueChange (value: T[]) => void
getItemValue (item: T) => string
children React.ReactNode
className string
onMove (event: SortableMoveEvent) => void
strategy 'horizontal' | 'vertical' | 'grid''vertical'
onDragStart (event: DragStartEvent) => void
onDragEnd (event: DragEndEvent) => void

SortableItem

A draggable item in the sortable list.

PropTypeDefault
value string
asChild booleanfalse
className string
children ReactNode
disabled booleanfalse

SortableItemHandle

A drag handle for an item.

PropTypeDefault
asChild booleanfalse
className string
children ReactNode
cursor booleantrue

Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.