Skip to content
UIGrammer
EN 中文

Theme · Product · Beginner

Kanban Board

Kanban board = horizontal columns, drag-ready cards, and an add-card affordance at the end of each column.

Skip to the modify prompt

Tips

Use color labels as the only decoration — they carry more meaning than a drag handle.

Build a Trello-style kanban board for a product team, "TaskFlow". STYLE - Soft board background (#e4ebf3), light-gray lists (#ebecf0) - White cards with a subtle shadow and a small color label bar on top - Trello palette labels: green, yellow, purple, blue LAYOUT - Three lists side by side: To Do, Doing, Done - Each list has a header (name + add icon), cards, then an "Add a card" row - To Do: "User interviews" (green label), "Sprint plan" (yellow label); tall adds "Retro notes" - Doing: "Onboarding flow" (purple label), "Landing copy"; tall adds "Email template" - Done: "v1 launch" (blue label), "QA pass" COMPONENTS - List header with name and a "+" affordance - Cards with an optional color label and a title - An "Add a card" action at the bottom of each list TECHNICAL - React - Tailwind CSS - shadcn/ui