Kanban
Move work items between columns while retaining an accessible move action.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/kanban-access-review.json.
Usage
Examples
Pipeline and access review
Workflow with collapsible columns
Issue tracking
Board options
Persisted to a backend
Recruiting pipeline
Release readiness
Renewals risk
Feature roadmap
Support escalations
API
6 props
Accessibility
Every item has a move control so dragging is optional. Keep columns inside the contained horizontal scrolling region (layout="scroll" on the composition board). Collapsed rails are buttons that name the column and its count; cards with their own controls use withHandle so the drag grip, not the card, is the sortable control.
Related
ItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesPillPill renders compact category and status labels.4 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examples