Back to components
ComponentBoardFree
Swimlane Board React component
A cross-team workflow board with collapsible swimlanes, draggable tasks, accessible status menus, owner filters and a visible work-in-progress limit.
About the Swimlane Board component
A cross-team workflow board with collapsible swimlanes, draggable tasks, accessible status menus, owner filters and a visible work-in-progress limit.
When to use it
Compare work across teams in one workflow.
Make work-in-progress pressure visible.
Installation
Add the Swimlane Board component to your project with the shadcn CLI. It lands in components/swimlane-board.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/swimlane-boardOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<SwimlaneBoard /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Different teams. One direction." |
| theme | "dark" | "light" | "dark" |
| initialTasks | SwimlaneTask[] | initial |
| onTasksChange | (tasks: SwimlaneTask[]) => void | — |
| wipLimit | number | 3 |
| className | string | — |
- titlestringDefault: "Different teams. One direction."
- theme"dark" | "light"Default: "dark"
- initialTasksSwimlaneTask[]Default: initial
- onTasksChange(tasks: SwimlaneTask[]) => void
- wipLimitnumberDefault: 3
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Swimlane Board FAQ
- Is the work-in-progress limit enforced?
- The limit is advisory: the in-progress header and footer flag excess work without blocking moves. Drag between cells on desktop or use each card’s status menu with touch and keyboard. onTasksChange provides updated data.
