# Kanban List > Reorder items within and between keyboard- and pointer-operable lists. Source: https://www.honestui.com/docs/components/kanban-list ### kanban-list ```tsx import { KanbanList } from "@/components/honest-ui/ui/kanban-list" export function KanbanListKanbanDemo() { return } ``` ## Overview [#overview] Use Kanban List to organize items into stages and reorder them with drag and drop — or entirely with the keyboard. Moving items never depends on a pointer, so no one is locked out of the board. Kanban lists work well for project tasks, editorial workflows, support queues, hiring pipelines, and other processes where items move through a sequence. The component ships with a fixed five-stage sales pipeline (To call → Called → Trial booked → Signed → Dropped); see [Stages and data](#stages-and-data) before adopting it outside that domain. ## Anatomy [#anatomy] A kanban list has stage panels, stage headers with icons and rolling item counts, item cards, a floating drag overlay, edge fades over scrollable regions, and hidden instructions plus a live region. Kanban view places stages side by side in a horizontally scrolling board; list view stacks the same stages vertically as compact rows. ## Stages and data [#stages-and-data] The stage set is built in: `to-call`, `called`, `trial`, `signed`, and `dropped`, each with a fixed name, color, and icon. Use `columns` to show a subset — useful in compact surfaces like the two-column demo above — but you cannot rename stages or add your own through props. An item is `{ id, name, stage, action, note, age, booked? }`. The component is uncontrolled: `defaultItems` seeds state once when it mounts, and later changes to the prop are ignored. Persist the array you receive in `onItemsChange` if moves must survive a reload. ## Behavior [#behavior] **Dragging.** Pointer movement past a small threshold picks up a card into an overlay that tilts with throw velocity. A gap opens at the drop position while dragging; hovering near a board edge auto-scrolls. Dropping onto Signed plays a check-mark flourish; dropping onto Dropped lands slightly slower to make disposal feel deliberate. **Keyboard.** Focus a card and use ←/→ to move it between adjacent stages and ↑/↓ to reorder within its stage. Cross-stage moves append to the end of the target stage — keyboard cannot insert at an arbitrary cross-stage position, only pointer drags can. Focus follows the card after each move. **Reduced motion.** With reduced motion requested, transitions collapse to instant placement and the tilt effect is disabled entirely. ## Accessibility [#accessibility] Each item is a focusable button whose accessible name includes its current stage, e.g. "Ava Rodriguez, To call. Use arrow keys to move." Hidden instructions attached via `aria-describedby` explain the arrow-key model on first focus. Pickup and every completed move are announced through a polite live region ("… moved to Called, position 2."). Stage headers label their columns, and counts carry their own labels. Colors come from paired light/dark CSS variables, so boards render correctly in dark mode. Note two honest limits: cards are ` ) })}
) })}