# Kanban Column

A 4% ink tray with a status dot, title and count, holding Kanban Cards. It can open a drop slot, show an empty hint, or collapse to its header.

Tier: Free

## Installation

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

## Usage

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

export function Example() {
  return (
    <KanbanColumn title="In progress" count={1} tone="warning">
      <KanbanCard id="HAL-142" title="Redesign the checkout summary" />
    </KanbanColumn>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| count | number | required |
| tone | neutral, info, success, warning, danger, accent | neutral |
| dropIndex | number |  |
| dropLabel | string | Drop to move here |
| emptyTitle, emptyHint | string |  |
| collapsed, defaultCollapsed | boolean | false |
| onCollapsedChange | (collapsed) => void |  |
| onAdd | () => void |  |
| addPlacement | both, header, footer, none | both |
| menu | MenuEntry[] or false | [] |
| icon | ReactNode, null drops the dot | status dot |
| over | boolean | false |
| list | boolean | false |
| appear | boolean | true |
| data-* | string |  |
| animated | boolean | true |

## When to use

- To build your own board layout out of cards.

## When not to use

- For a working board with drag: use Kanban, which handles moves.

## Accessibility

- The column is a section named by its title.
- With list, the cards form a list named by the title, so each child should be a list item.
- Collapse lives in the column menu, and Expand is a labelled button with an expanded state.
- The count reads as a number of cards.

## Motion

- The column fades and rises 8 over 400 ms, unless appear is false.
- The drop slot fades in over 120 ms.
- With reduced motion, only state changes remain.