Kanban
Visualize tasks and workflow stages.
A task card with ownership, progress, and metadata.
Interactive playground
LIVE PREVIEW
Loading preview…
Generated code
import { KanbanCard } from '@vrum/ui';
<KanbanCard
title={"Design system migration"}
description={"Bring clarity to every workflow."}
dueDate={"Oct 12"}
priority={"medium"}
flag={false}
assignee={{"name":"Jane Doe"}}
tags={[{"label":"Design","color":"purple"}]}
progress={35}
attachmentCount={2}
commentCount={3}
/>KanbanCard props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | none | Task title. |
subtitle | string | none | subtitle configuration. |
description | string | none | Short description. |
dueDate | string | none | Due date label. |
flag | boolean | none | Show a flag. |
priority | "medium" | "low" | "high" | none | Task priority. |
avatar | { src?: string; fallback?: string; } | none | avatar configuration. |
assignee | { name: string; avatar?: string; } | none | Assigned person: name and optional avatar. |
tags | { label: string; color?: TagProps["color"]; }[] | none | Array of labels and supported tag colors. |
attachmentCount | number | 0 | Attachment count. |
commentCount | number | 0 | Comment count. |
progress | number | none | Completion percentage. |
className | string | none | Additional CSS classes. |
onClick | (() => void) | none | Called when the control is activated. |