# Task cards

> Three task cards — subtask checklist, board card with status menu, and focus timer — with drawn ticks, lifting cards, fanning avatars and rolling digits.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/task-cards
- Install: `npx shadcn@latest add @geturui-pro/task-cards`
- Dependencies: motion, lucide-react

## Variants

### Subtasks

Checklist with drawn ticks and strike-throughs, a springing progress bar and inline add.

Install: `npx shadcn@latest add @geturui-pro/task-cards-subtasks`

```tsx
import { SubtaskCard } from "@/components/examples/task-cards/subtasks";

export function Task() {
  return <SubtaskCard title="Ship onboarding v2" defaultSubtasks={subtasks} onChange={save} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| project / title / due | `string` | — | Task header. |
| defaultSubtasks | `Subtask[]` | — | { id, title, done }. |
| onChange | `(subtasks: Subtask[]) => void` | — | Called after every change. |
| className | `string` | — | Extra classes on the card. |

### Board card

Board card that lifts on hover, fans its assignees and moves between columns from a status menu.

Install: `npx shadcn@latest add @geturui-pro/task-cards-kanban`

```tsx
import { KanbanTaskCard } from "@/components/examples/task-cards/kanban";

export function Card() {
  return <KanbanTaskCard id="GRO-218" title="Usage-based pricing" defaultStatus="progress" onStatusChange={move} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| id / title / description | `string` | — | Card content. |
| labels | `string[]` | — | Neutral label chips. |
| priority | `"low" | "medium" | "high"` | "high" | Priority with icon and word. |
| due / dueSoon | `string / boolean` | — | Due chip and its at-risk state. |
| assignees | `{ name: string; initials: string }[]` | — | Avatar stack. |
| comments / attachments | `number` | — | Footer counts. |
| defaultStatus / onStatusChange | `TaskStatus / (s: TaskStatus) => void` | — | "todo" | "progress" | "review" | "done". |
| className | `string` | — | Extra classes on the card. |

### Focus timer

Pomodoro card for one task with a ticking ring, rolling digits, focus and break modes and session dots.

Install: `npx shadcn@latest add @geturui-pro/task-cards-focus`

```tsx
import { FocusTimerCard } from "@/components/examples/task-cards/focus";

export function Focus() {
  return <FocusTimerCard task="Write the pricing brief" focusMinutes={25} onSessionComplete={log} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| task / project | `string` | — | What is being focused on. |
| focusMinutes / breakMinutes | `number` | 25 / 5 | Mode lengths. |
| sessions / defaultCompleted | `number` | 4 / 2 | Session dots. |
| onSessionComplete | `(mode: "focus" | "break") => void` | — | Called when a countdown ends. |
| className | `string` | — | Extra classes on the card. |

## Accessibility

- Subtasks are native checkboxes behind custom ticks; the status menu supports arrows, Escape and returns focus.
- Priority and due chips pair colour with an icon and a word.
- The timer exposes a timer role with the remaining time, and reduced motion removes digit rolls and lifts.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.