List
List views are a great way to show a list of tasks grouped by status and ranked by priority.
Planned
AI Scene Analysis
AlReal-time Video Chat
DiAI-Assisted Video Transitions
GeMulti-User Permissions
JuAI Scene Recommendations
MiGlobal CDN Integration
PeAI-Powered Video Summarization
SaIn Progress
Collaborative Editing
BoAI Voice-to-Text Subtitles
EtVersion Control System
HaAI-Powered Audio Enhancement
KeCollaborative Storyboarding
NaAI Object Tracking
QuBlockchain-based Asset Licensing
ToDone
AI-Powered Color Grading
ChCloud Asset Management
FiAI Content-Aware Fill
IaReal-time Project Analytics
LaAI-Driven Video Compression
OsReal-time Language Translation
RaInstallation
npx kibo-ui@latest add list
Features
- Drag and drop items between groups
- Customize the item contents
Examples
Simple version
Planned
AI Scene Analysis
Real-time Video Chat
AI-Assisted Video Transitions
Multi-User Permissions
AI Scene Recommendations
Global CDN Integration
AI-Powered Video Summarization
In Progress
Collaborative Editing
AI Voice-to-Text Subtitles
Version Control System
AI-Powered Audio Enhancement
Collaborative Storyboarding
AI Object Tracking
Blockchain-based Asset Licensing
Done
AI-Powered Color Grading
Cloud Asset Management
AI Content-Aware Fill
Real-time Project Analytics
AI-Driven Video Compression
Real-time Language Translation
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 |
|---|---|---|
className? | string | - |
onDragEnd | (event: DragEndEvent) => void | - |
children | ReactNode | - |
ListGroup
The ListGroup component is used to display a group of items.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children | ReactNode | - |
id | 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 |
|---|---|---|
className? | string | - |
children | ReactNode | - |
ListItem
The ListItem component is used to display an item.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children? | ReactNode | - |
parent | string | - |
index | number | - |
name | string | - |
id | 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".
Table
Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.