Kanban Agent Tasks

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/kanban/kanban1.tsx instead.

Usage

The file also exports kanban1Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Kanban1, kanban1Demo } from "@/components/blocks/kanban/kanban1";

export default function Page() {
  return <Kanban1 {...kanban1Demo} />;
}

Props

Types

type Agent = { id: string; name: string };

type Priority = "urgent" | "high" | "normal";

type Ticket = {
  id: string;
  agentId: string;
  customer: string;
  subject: string;
  priority: Priority;
  column: "queue" | "active" | "waiting" | "resolved";
};

Behavior notes

• Dragging a card and dropping it on a different column cell in the same agent row genuinely updates that ticket's column via client state; the `tickets` prop only seeds the board's initial state on mount, matching every other stateful block in this catalog.
• Dragging uses plain HTML5 drag events (draggable, onDragStart/onDragOver/onDrop) with no external drag-and-drop library, so it responds to mouse and touch-emulated drag but has no keyboard equivalent.
• A card can only be dropped into a column within its own agent's row; there is no cross-agent reassignment.
• The four columns (Queue, Active, Waiting, Resolved) are a fixed list in the component, not a prop, the same way dashboard blocks fix their tab lists in code.
• Priority maps to a fixed dot color (urgent: red, high: amber, normal: blue) via a lookup table in the component, not a themeable prop.
• Every avatar renders initials only; there is no photo field, matching this batch's placeholder-only imagery convention.

Frequently asked questions

Related components