Onboarding

Setup Checklist

A setup-progress checklist with a progress bar and per-item actions.

Finish setting up

Complete these steps to get the most out of Cooud.

2 of 5

40% complete2 of 5 complete

Verify your email
Your email address is confirmed.
Create your first project
You created the project “Atlas”.
Invite a teammate
Collaborate with your team in real time.
Add a payment method
Keep your workspace active after the trial.
Install the CLI
Ship from your terminal in seconds.

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Setup Checklist to your app with its source-owned dependencies.

bash

npx cooud-ui add setup-checklist

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Setup Checklist. Every class is a semantic token, so it re-themes with your app.

tsx

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Checkbox,
  Progress,
} from "@cooud-ui/ui";
import { Check } from "lucide-react";

export function SetupChecklistBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-xl gap-6 shadow-lg">
        <CardHeader className="flex flex-row items-start justify-between gap-4">
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">Finish setting up</CardTitle>
            <p className="text-sm text-fg-secondary">
              Complete these steps to get the most out of Cooud.
            </p>
          </div>
          <Badge variant="secondary">2 of 5</Badge>
        </CardHeader>

        <CardContent className="flex flex-col gap-5">
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between text-sm">
              <span className="font-medium text-fg">40% complete</span>
              <span className="text-fg-tertiary">2 of 5 complete</span>
            </div>
            <Progress value={40} aria-label="Setup progress: 2 of 5 complete" />
          </div>

          <ul className="flex flex-col gap-1">
            <li className="flex items-center gap-3 rounded-xl border border-border p-3">
              <span className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-success/15 text-success">
                <Check className="size-3.5" aria-hidden="true" strokeWidth={2.5} />
              </span>
              <div className="flex flex-1 flex-col gap-0.5">
                <p className="text-sm font-medium text-fg-tertiary line-through">
                  Verify your email
                </p>
                <p className="text-sm text-fg-tertiary">Your email address is confirmed.</p>
              </div>
            </li>

            <li className="flex items-center gap-3 rounded-xl border border-border p-3">
              <span className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-success/15 text-success">
                <Check className="size-3.5" aria-hidden="true" strokeWidth={2.5} />
              </span>
              <div className="flex flex-1 flex-col gap-0.5">
                <p className="text-sm font-medium text-fg-tertiary line-through">
                  Create your first project
                </p>
                <p className="text-sm text-fg-tertiary">
                  You created the project &ldquo;Atlas&rdquo;.
                </p>
              </div>
            </li>

            <li className="flex items-center gap-3 rounded-xl border border-border p-3">
              <Checkbox aria-label="Invite a teammate" className="shrink-0" />
              <div className="flex flex-1 flex-col gap-0.5">
                <p className="text-sm font-medium text-fg">Invite a teammate</p>
                <p className="text-sm text-fg-secondary">
                  Collaborate with your team in real time.
                </p>
              </div>
              <Button variant="outline" size="sm">
                Start
              </Button>
            </li>

            <li className="flex items-center gap-3 rounded-xl border border-border p-3">
              <Checkbox aria-label="Add a payment method" className="shrink-0" />
              <div className="flex flex-1 flex-col gap-0.5">
                <p className="text-sm font-medium text-fg">Add a payment method</p>
                <p className="text-sm text-fg-secondary">
                  Keep your workspace active after the trial.
                </p>
              </div>
              <Button variant="outline" size="sm">
                Start
              </Button>
            </li>

            <li className="flex items-center gap-3 rounded-xl border border-border p-3">
              <Checkbox aria-label="Install the CLI" className="shrink-0" />
              <div className="flex flex-1 flex-col gap-0.5">
                <p className="text-sm font-medium text-fg">Install the CLI</p>
                <p className="text-sm text-fg-secondary">Ship from your terminal in seconds.</p>
              </div>
              <Button variant="outline" size="sm">
                Start
              </Button>
            </li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}