List

List views are a great way to show a list of tasks grouped by status and ranked by priority.

Powered by

dnd kit

Lucide

Installation

npx kibo-ui@latest add list

Features

Drag and drop items between groups
Customize the item contents

Examples

Simple version

Props

The list view is made up of the following subcomponents:

ListProvider

The ListProvider component is used to provide the features to the list.

Prop	Type	Default
`children`	`ReactNode`	-
`onDragEnd`	`(event: DragEndEvent) => void`	-
`className?`	`string`	-

ListGroup

The ListGroup component is used to display a group of items.

Prop	Type	Default
`id`	`string`	-
`children`	`ReactNode`	-
`className?`	`string`	-

ListHeader

The ListHeader component is used to display the header of a group.

Prop	Type	Default

ListItems

The ListItems component is used to display the items of a group.

Prop	Type	Default
`children`	`ReactNode`	-
`className?`	`string`	-

ListItem

The ListItem component is used to display an item.

Prop	Type	Default
`id`	`string`	-
`name`	`string`	-
`index`	`number`	-
`parent`	`string`	-
`children?`	`ReactNode`	-
`className?`	`string`	-

Kanban

A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".

Marquee

Marquees are a great way to show a list of items in a horizontal scrolling motion.