Kanban Card

Pro

Task card for boards with status, priority, labels, assignees, due date and checklist progress. Marking it done fills the ring and draws a check, and can fold the card out of its column.

Preview

Installation

npx @lumioui/cli add pro/kanban-card

Usage

import { StatusGlyph, PriorityGlyph, KanbanCard } from "@/components/ui/kanban-card/kanban-card";
<KanbanCard />

Also exported: StatusGlyph, PriorityGlyph.

Examples

Board

A content team's board column: cover photo, coloured labels, checklist chip, due chip, comments and attachments.

Checklist

An opened card on a home-renovation board.

Issues

An engineering board column in the issue-tracker idiom: status glyph, key, priority bars, label dots, assignee, and the tracker's own due labels ("Overdue 2d", "Fri") passed straight through.

API reference

Prop Type Default
title* string —
total* number } —
identifier string

Issue key — "ENG-412".

 —
status KanbanStatus —
priority KanbanPriority —
labels KanbanLabel[] —
assignees AvatarGroupItem[] —
due Date | string

Due date — a Date renders "Due today", "Tomorrow", "Overdue · Oct 6"; a plain label ("Fri", "Tomorrow", "Overdue 2d") renders as given, toned from its wording unless dueTone says otherwise.

 —
dueTone KanbanDueTone

Force the due chip's tone (overrides the Date / label inference).

 —
checklist { done: number

Checklist progress chip — turns green when done === total.

 —
comments number —
attachments number —
cover ImageSourcePropType

Cover image across the top (board-card idiom).

 —
children React.ReactNode

Extra body content under the meta row (expanded checklist, description).

 —
draggable boolean

Long-press lifts the card for dragging. Default false.

 false
onLiftChange (lifted: boolean) => void

Lifted state changed (long-press / release).

 —
lifted boolean

Force the lifted look (e.g. while your own drag layer owns the card).

 —
onPress () => void —
now Date

Pin "today" for due-date wording. Default now.

 —
foldOnDone boolean

After the card turns Done, fold it out of its column (height collapse) once the result has held. Default false.

 false
onDoneSettled () => void

Fires after the Done hold (and fold, with foldOnDone) — move the card to its Done column here.

 —
className string —