Kanban Board
A task board you can pick cards up from.
$149 once · every Pro piece
The held card lifts, casts a deep shadow and tilts with the pointer's speed, pivoting where you hold it; neighbours part on springs, a soft slot opens where it will land and the drop settles with a small overshoot. Shift or Cmd-click several and they travel as a stack. Headers drag to reorder columns, columns collapse to strips, rows split into swimlanes by assignee or priority, and WIP limits run hot when exceeded. Space lifts, the arrows carry a card within and across columns, Space drops, with every move announced. The filter dims cards instead of removing them.
Install
npx shadcn@latest add @obsyde/kanbanNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { KanbanBoard } from '@/components/obsyde/ember/kanban/KanbanBoard';
export function Example() {
return (
<KanbanBoard />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/kanban/KanbanBoard.tsxcomponentember/kanban/kanban.cssstylesember/kanban/glyphs.tsxmoduleember/kanban/KanbanBoardDemo.tsxdemoember/display-kit/motion.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/kit2-kit/kit.tssharedember/shared/rolling-number.csssharedember/shared/RollingNumber.tsxsharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
densityDensity | 'comfortable' | 'compact' | 'comfortable' |
swimlanesSwimlanes | 'none' | 'assignee' | 'priority' | 'none' |
wipWIP limits | boolean | false |
collapsedCollapsed | 'none' | 'backlog' | 'backlog-done' | 'none' |
tiltTilt on drag | boolean | true |
readOnlyRead-only | boolean | false |