SIG—07 Signature system
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.
Live — this one is real
Drag a card by its body with a mouse, or its grip on touch. Space picks a card up from the keyboard, arrows carry it, Space drops, Escape cancels. Enter opens it.
Backlog
Archive last year's pricing experiments
cleanupOffline mode for the field app
research
Ready
Rewrite the migration plan with one owner
Rehearse the rollback on staging
ops
Doing
Load test against the new schema
perfStatus page copy for launch day
Review
Feature flag for the importer
safety
Done
Staging data mirrors production
Weekly demo on the calendar
Press Space to pick up. While holding, arrow keys move between positions and columns, Space drops and Escape cancels. Enter opens the card.
Usage
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",
},
]}
/>
);
}
This code, running — no configuration beyond the data
To do
Draft the announcement
Record the demo
Doing
- No cards
Done
Pick a launch date
Press Space to pick up. While holding, arrow keys move between positions and columns, Space drops and Escape cancels.
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
Source & setup
Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with its source module’s stylesheet and base.css, Mizu’s tokens. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.
npx shadcn@latest add 0xuser64bit/mizu/boardEvery component imports from its own path, its name in kebab case.
import { Board, moveCard } from "@/components/ui/mizu/board";For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.
Inspect signature/Board.tsx
Source is included in the npm package under src/signature/Board.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | 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. |
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.