# Kanban Card

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/kanban-card
```

## Import

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

## Variants

- `board` — Board: `npx @lumioui/cli add pro/kanban-card-board`
- `checklist` — Checklist: `npx @lumioui/cli add pro/kanban-card-checklist`
- `issues` — Issues: `npx @lumioui/cli add pro/kanban-card-issues`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | — |
| `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. |
| `total` | `number }` | — |
| `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. |
| `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. |
| `onDoneSettled?` | `() => void` | Fires after the Done hold (and fold, with `foldOnDone`) — move the card  to its Done column here. |
| `className?` | `string` | — |

## Icons rendered

- `check-circle` — /icons.html?i=check-circle
- `message-circle` — /icons.html?i=message-circle
- `paperclip` — /icons.html?i=paperclip

Source: https://lumioui.com/components/kanban-card