{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kanban-board",
  "type": "registry:ui",
  "title": "Kanban board",
  "description": "A horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/kanban-board.tsx",
      "type": "registry:ui",
      "target": "components/ui/kanban-board.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** Columns of cards in a horizontally scrolling board, each column headed by its title and card count. */\ntype KanbanCard = { id: string; title: string; meta?: string }\ntype KanbanColumn = { id: string; title: string; cards: KanbanCard[] }\n\nconst SAMPLE_COLUMNS: KanbanColumn[] = [\n  {\n    id: \"backlog\",\n    title: \"Backlog\",\n    cards: [\n      { id: \"k1\", title: \"Add VAT reverse charge to EU invoices\", meta: \"LUM-412 · Priya Raman\" },\n      { id: \"k2\", title: \"Export payouts as CSV\", meta: \"LUM-418 · Sam Lowe\" },\n      { id: \"k3\", title: \"Customer portal dark mode\", meta: \"LUM-420\" },\n    ],\n  },\n  {\n    id: \"progress\",\n    title: \"In progress\",\n    cards: [\n      { id: \"k4\", title: \"Reminder emails for overdue invoices\", meta: \"LUM-401 · Maya Chen\" },\n      { id: \"k5\", title: \"Reconcile Stripe payouts nightly\", meta: \"LUM-409 · Theo Okafor\" },\n    ],\n  },\n  {\n    id: \"review\",\n    title: \"In review\",\n    cards: [{ id: \"k6\", title: \"Multi-currency totals on dashboard\", meta: \"LUM-397 · Ada Novak\" }],\n  },\n  {\n    id: \"done\",\n    title: \"Done\",\n    cards: [\n      { id: \"k7\", title: \"Invoice PDF redesign\", meta: \"Shipped Oct 2\" },\n      { id: \"k8\", title: \"Northwind SSO rollout\", meta: \"Shipped Sep 29\" },\n    ],\n  },\n]\n\ntype KanbanBoardProps = {\n  /** Columns left to right, each with its cards. Defaults to a Lumen engineering board. */\n  columns?: KanbanColumn[]\n  className?: string\n}\n\nfunction KanbanBoard({ columns = SAMPLE_COLUMNS, className }: KanbanBoardProps) {\n  return (\n    <div data-slot=\"kanban-board\" className={cn(\"flex w-full gap-3 overflow-x-auto pb-2\", className)}>\n      {columns.map((col) => (\n        <div key={col.id} className=\"w-64 shrink-0 rounded-xl border border-border bg-sunken p-2\">\n          <div className=\"mb-2 flex items-center justify-between px-1\">\n            <h3 className=\"text-xs font-medium tracking-[0.01em] text-fg-muted\">{col.title}</h3>\n            <span className=\"text-xs tabular-nums text-fg-subtle\">{col.cards.length}</span>\n          </div>\n          <div className=\"space-y-2\">\n            {col.cards.map((card) => (\n              <div key={card.id} className=\"rounded-lg border border-border bg-surface p-3 shadow-highlight\">\n                <p className=\"text-sm text-fg\">{card.title}</p>\n                {card.meta ? <p className=\"mt-1 text-xs text-fg-muted\">{card.meta}</p> : null}\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { KanbanBoard }\nexport type { KanbanBoardProps, KanbanColumn, KanbanCard }\n"
    }
  ]
}