# Kanban Card

One card: tag and id, a two line title, then assignee, due date, comments and subtasks.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/kanban-card
```

## Usage

```tsx
import { KanbanCard } from '@/components/fetaui/kanban-card'

export function Example() {
  return <KanbanCard id="HAL-142" title="Redesign the checkout summary for mobile" tag={{ label: 'Design' }} due="Oct 30" comments={4} subtasks={[2, 5]} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| id | string | required |
| title | string | required |
| tag | { label, tone? } |  |
| assignee | { name, src?, person? } |  |
| due | string |  |
| comments | number |  |
| subtasks | [done, total] |  |
| done | boolean | false |
| state | hover, dragging, lifted, placeholder |  |
| top | ReactNode, null drops the row | tag and id |
| meta | ReactNode, null drops the row | assignee, due, comments, subtasks |
| density | default, compact | default |
| handle | button props |  |
| appear | boolean | true |
| animated | boolean | true |

## When to use

- Inside Kanban Column, or anywhere one tracked piece of work needs a compact summary.

## When not to use

- When there is one fact to show: use Badge or Item.

## Accessibility

- The title is a heading, and each stat has a full text label.
- Done adds a labelled check and mutes the title, so state is never colour alone.
- handle takes your aria props. The card adds a visible focus ring to it and nothing else.

## Motion

- The card fades in over 240 ms, unless appear is false.
- Hover darkens the border over 120 ms.
- Dragging lifts with a 2 degree tilt and a shadow. Lifted adds a 2 px ring with the same tilt. Placeholder dims to 32%.
- With reduced motion, there is no tilt.