48 Pro components and page blocks

Get Pro
uibrik

Kanban Board

Pro

Preview

Customize

Column width264px
Max tilt6°

Usage

import { KanbanBoard } from "@/components/uibrik/kanban-board/kanban-board";

<KanbanBoard />

Installation

Pro

Kanban Board is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/kanban-board

Props

KanbanBoard
columnWidth
Type number
264
Width of an open column.
tilt
Type boolean
true
Lean a dragged card toward the way it's moving.
maxTilt
Type number
6
Most a dragged card leans.
multiSelect
Type boolean
true
Cmd, Ctrl or Shift-click selects several cards to drag as one stack.
columns
Type { id: string; title: string; color?: string; cards: KanbanCard[] }[]
SAMPLE_COLUMNS
Columns on mount. The board keeps its own state from then on. `color` is the dot beside the name.
KanbanCard
Type { id: string; title: string; tag?: string; assignees?: (string | { name: string; avatar?: string })[]; progress?: [done, total] }
–
A card. People without a photo get their initials on a gradient picked from their name.
tagColors
Type Record<string, string>
DEFAULT_TAG_COLORS
Colour for each tag, by name. Tags not listed stay neutral.
defaultCollapsed
Type string[]
[]
Ids of columns folded into rails on mount.
onChange
Type (columns) => void
–
Called with every column after a card lands somewhere new.
className
Type string
–
Classes for the wrapper. It fills its parent and scrolls sideways when the columns don't fit.