Components

Kanban

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

Loading

Installation

pnpm dlx shadcn@latest add @toui/kanban

Examples

Overlay

Loading

API Reference

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

Kanban

The root Kanban component includes the following props:

PropTypeDefault
value Record<string T[]>
onValueChange (value: Record\string T[]>) => void
getItemValue (item: T) => string
children React.ReactNode
className string
onMove (event: KanbanMoveEvent) => void

KanbanColumn

A draggable column in the Kanban board.

PropTypeDefault
value string
className string
children ReactNode
disabled booleanfalse

KanbanColumnHandle

A drag handle for a column.

PropTypeDefault
asChild booleanfalse
className string
children ReactNode
cursor booleantrue

KanbanItem

A draggable item in a column.

PropTypeDefault
value string
asChild booleanfalse
className string
children ReactNode
disabled booleanfalse

KanbanItemHandle

A drag handle for an item.

PropTypeDefault
asChild booleanfalse
className string
children ReactNode
cursor booleantrue

KanbanColumnContent

A wrapper for the items in a column.

PropTypeDefault
value string
className string
children ReactNode

KanbanOverlay

A custom overlay for the dragged item or column.

PropTypeDefault
className string
children ReactNode | (params: { value: UniqueIdentifier; variant: 'column' | 'item' }) => ReactNode

Credits

PreviouseFile UploadNextKbd

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.