Data display
Kanban
A working board, not a snapshot. Cards carry priority, tags, due dates, subtask and comment counts; columns enforce WIP limits and count their load. Drag a card across columns, regroup the whole board by priority, and add work inline.
npx shadcn@latest add @orbit/kanbanOverview
Live component — drag any card to another column (a blue line shows exactly where it lands), toggle Group: Priority, or hit + Add card to add one inline. The columns scroll sideways inside the board.
Anatomy
Each column owns a colored status dot, a live count pill (count / limit when a WIP cap is set), and an add / options pair. Cards compress a task into one scannable tile: a 3-bar priority meter and mono ID on top, title and labels in the body, then due date, subtask progress, comments and the assignee avatar in the footer. Overdue dates flip red; complete subtask counts go green.
WIP limits
A neutral count pill reads count / limit while a column is at or under its WIP cap. Cross the limit and the pill turns red, with a banner naming how many cards over you are.
Group by priority
The segmented control in the board header flips every column between status and priority lanes — the same cards re-sliced into Urgent / High / Medium / Low without moving anything. Also available as the controlled groupBy prop.
Controlled
Pass items + onItemsChange to own the board — every drop, keyboard move and quick-add reports the full next board. onMove additionally fires per move with the card id, source and destination column, and indices, ready to persist.
Drag a card (or focus one and press Shift+Arrows) — every move reports through onMove.
Custom cards
renderCard replaces the card body while the shell keeps its border, selection ring, drag handlers and keyboard moves — use it for denser tiles or extra fields.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | KanbanColumn[] | — | Board columns: { id, name, accent?, wip? }. accent colors the header dot; wip sets the limit behind the count pill. |
| items / defaultItems | Record<string, KanbanItem[]> | — | Controlled / uncontrolled cards per column id, in column order. Items carry { id, title, priority?, labels?, assignee?, due?, overdue?, subtasks?, comments? }. |
| onItemsChange | (items) => void | — | Fires with the full next board on every drop, keyboard move and quick-add. |
| onMove | (move: KanbanMove) => void | — | Fires per card move with { itemId, from, to, fromIndex, toIndex }. |
| onAddItem | (item, columnId) => void | — | A quick-add draft was committed (Enter or the Add button). |
| createItem | (columnId, title) => KanbanItem | — | Factory for quick-added cards — mint real ids here. Default: card-n + medium priority. |
| onSelectItem | (item) => void | — | A card was clicked or selected with Enter / Space. |
| title / subtitle | ReactNode | — | Board header copy. The header renders when any header prop is set. |
| people / peopleOverflow | KanbanPerson[] / number | — | Header avatar stack ({ initials, color }) with a trailing +N chip. |
| onNewTask | () => void | open first column's quick-add | Overrides the header's primary New task button. |
| showNewTask / showGroupToggle | boolean | true | Hide the header's primary button / segmented group control. |
| groupBy / defaultGroupBy | "status" | "priority" | "status" | Controlled / uncontrolled grouping; onGroupByChange reports toggles. "priority" re-slices each column into lanes. |
| compact | boolean | false | Columns grow to fit their cards instead of the fixed 560px rail. |
| renderCard | (item, ctx) => ReactNode | — | Replace the default card body. ctx = { column, index, selected, dragging }. |
| addPlaceholder / addLabel | string | "What needs doing?" / "Add card" | Quick-add textarea placeholder and the dashed add button label. |
| …rest | HTMLAttributes | — | Forwarded to the root <div>, including ref. |
Usage
Keep columns to a handful
Four to six stages read at a glance. More than that and the board scrolls sideways into a maze.
Let In-progress sprawl
WIP limits exist to be felt. If a column is permanently red, the limit — or the staffing — is wrong.
Put the next action on the card
A due date, an owner, a subtask count — enough to act without opening the task.
Use it for sequenced work
Dependencies and durations belong on the Gantt. A board shows state, not a schedule.
Keyboard & accessibility
Columns are lists of draggable-card list items. Every card is focusable with a Shift+Arrow move alternative to drag, and each move is announced to screen readers via a polite live region. Escape backs out of the quick-add draft.