Setup checklist

Pro

What's left before the first useful answer: connect an environment, let the agents read it, invite the team. The current step is open with its one action; a blocked step says what it waits for. Progress counts only steps done.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/setup-checklist

Brings in: button, locale, team, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { SetupChecklist } from "@/components/setup-checklist"
import type { SetupStep } from "@/lib/team"

const steps: SetupStep[] = [
  { id: "account", title: "Create your account", status: "done" },
  { id: "staging", title: "Connect Staging", status: "done" },
  { id: "read", title: "Let Keel read Acme API Staging", detail: "About 6 minutes for a codebase this size. You can ask questions while it reads.", status: "current", action: { label: "Start reading", onClick: () => {} } },
  { id: "invite", title: "Invite your team", status: "todo" },
  { id: "prod", title: "Connect Production", status: "blocked", blockedBy: "a Staging change approved end to end" },
]

export default function Example() {
  return <SetupChecklist className="w-full max-w-md" title="Get Acme ready" steps={steps} />
}

<SetupChecklist>

Prop	Type	Default	Description
titlerequired	`string`	—	The heading, also the checklist's accessible name.
stepsrequired	`SetupStep[]`	—	The steps in order, each with its status and action.
bare	`boolean \| undefined`	false	No border or heading, only the progress and steps, for inside another card (AccountState's `steps`). Defaults to false.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under setupChecklist in <LocaleProvider strings={{ … }}>; the table is exported as setupChecklistStrings.

Key	English
progress	{done} of {total} done
waitsFor	Waits for: {what}