# Board

A kanban board with lift-and-carry dragging, cards that part and fly into place, advisory limits, collapsible columns and a full keyboard path.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/board
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Board.tsx

## Usage

```tsx
import { Board } from "mizu-ui";

export function Example() {
  return (
    <Board
      label="Launch"
      columns={[
        { id: "todo", title: "To do" },
        { id: "doing", title: "Doing", limit: 2 },
        { id: "done", title: "Done" },
      ]}
      defaultCards={[
        {
          id: "a",
          column: "todo",
          title: "Draft the announcement",
          meta: "2d",
        },
        { id: "b", column: "todo", title: "Record the demo" },
        {
          id: "c",
          column: "done",
          title: "Pick a launch date",
          assignee: "Rin Sato",
        },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/board
```

## Props

- `label / columns`: `string / BoardColumn[]`. Region name; columns have id, title and an optional advisory limit.
- `cards / defaultCards / onCardsChange`: `BoardCard[]`. id, column, title, meta, tags, assignee and tone. Order within a column follows array order.
- `readOnly`: `boolean` (default `false`). Cards open but cannot be moved.
- `renderCard`: `(card) => ReactNode`. Replace the default card body; dragging and keyboard behaviour stay.
- `onCardOpen / onAddCard`: `(card) => void / (column) => void`. Enter or double-click opens; an add button per column.
- `moveCard(cards, id, column, index)`: `function`. The same reorder used internally, for your own commands.

## Keyboard

- Space: Pick up or drop the focused card
- ↑ ↓: While holding: move within the column
- ← →: While holding: move to the next column
- Esc: Put the card back
- Enter: Open the card

## Accessibility

Cards are buttons described as draggable. Space picks one up and announces its column and position; arrows move it between positions and columns, Space drops, Escape restores it. Each column states its count and limit; being over a limit is written, not only coloured. Touch drags start from a grip so the page still scrolls.

## Motion

A picked-up card lifts and tilts while its neighbours part to open a slot; carried near an edge, the board scrolls itself. On drop the card flies from your hand into its new place through a shared layout transition. Reduced motion moves cards without travel.