Skip to content
Data, new

Kanban Board

A task board you can pick cards up from.

$149 once · every Pro piece

Customize

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/kanban

Needs 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.tsxcomponent
  • ember/kanban/kanban.cssstyles
  • ember/kanban/glyphs.tsxmodule
  • ember/kanban/KanbanBoardDemo.tsxdemo
  • ember/display-kit/motion.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/kit2-kit/kit.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
densityDensity'comfortable' | 'compact''comfortable'
swimlanesSwimlanes'none' | 'assignee' | 'priority''none'
wipWIP limitsbooleanfalse
collapsedCollapsed'none' | 'backlog' | 'backlog-done''none'
tiltTilt on dragbooleantrue
readOnlyRead-onlybooleanfalse