Board Checklist

Component 5

About

A compact task checklist card with checkboxes, assignee tags, priority badges, and an animated completion progress bar.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Board Checklist to your project and fits it to your theme.

Code

How Board Checklist is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { BoardChecklist, type TaskItem } from "@/components/ui/board-checklist";

const initialItems: TaskItem[] = [
  {
    id: "1",
    label: "Setup stage",
    done: true,
    assignee: "ALX",
    priority: "high",
  },
  {
    id: "2",
    label: "Wire up lighting rig",
    done: true,
    assignee: "MJ",
    priority: "med",
  },
  {
    id: "3",
    label: "Soundcheck with band",
    done: false,
    assignee: "KT",
    priority: "high",
  },
  {
    id: "4",
    label: "Print backstage passes",
    done: false,
    assignee: "RN",
    priority: "low",
  },
  { id: "5", label: "Confirm merch table", done: false, priority: "med" },
];

export default function BoardChecklistDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6 text-foreground">
      <BoardChecklist
        title="Show Day Tasks"
        items={initialItems}
        onToggle={(id) => console.log("toggled", id)}
      />
    </div>
  );
}