Kanban Board
A kanban board with four columns whose cards drag between and within columns by pointer or keyboard, with list and timeline views of the same tasks.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { KanbanBoard } from "@/components/miyuki-ui/kanban-board";
import { people } from "@/registry/lib/data";
const team = [people[2], people[8], people[5], people[6], people[9]];
const members = team.map((p) => ({ name: p.name, avatar: p.avatar }));
export default function KanbanBoardDemo() {
return <KanbanBoard members={members} user={{ name: team[0].name, email: team[0].email, avatar: team[0].avatar }} />;
}Install
npx shadcn@latest add @miyuki-ui/kanban-boardThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
KanbanBoard
Prop
Type
Image Studio
A prompt thread that generates images in a frame, with like, regenerate and download, and a panel with a masonry gallery and named styles.
Member Profile
A member's profile in an agent workspace: a cover and avatar, lifetime stats, a year of runs that regroups by week, month or year, runs per agent by month and recent tasks, with sharing and editing.