FreeIn reviewv1.0.0

Setup Checklist

A first-run checklist with a progress bar and tickable tasks, each with a hint.

npx shadcn@latest add @vibebox/setup-checklist

Content

Controls

Accent

<SetupChecklist />

About

Onboarding is a short list with a visible end. The bar animates with a transform, not a width.

Use it when

A new account has a few things to set up.

Skip it when

Steps depend on each other: use a wizard.

Install

1Add the VibeBox registry to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2Add the component with the shadcn CLI:
npx shadcn@latest add @vibebox/setup-checklist

3Use it:

import { SetupChecklist } from "@/components/vibebox/setup-checklist";

<SetupChecklist accent="#7c5cff" />

AI prompt

Everything an AI coding tool needs to rebuild this component the way it looks here: colours, fonts, the art it draws, props and rules.

Read the prompt

Build the VibeBox Motion component "Setup Checklist" (Onboarding) in a Next.js App Router project with Tailwind CSS v4.

What it is
- A first-run checklist with a progress bar and tickable tasks, each with a hint.
- A setup checklist for the first run of a product: a title, a count, a progress bar in the accent and tasks the person can tick, each with a one-line hint. Native checkboxes in labels, so the whole row is the target; the bar is a labelled progressbar.

Install
- `npx shadcn@latest add @vibebox/setup-checklist`
- Registry: add `"@vibebox": "https://motion.vibeboxph.com/r/{name}.json"` to components.json, then run the command. The source lands in `components/vibebox/setup-checklist` and is yours to edit.

Visual spec
- Colours (the VibeBox spectrum, the same in light and dark):
    - --spectrum-1: #00c5fc (cyan)
    - --spectrum-2: #1d6ef0 (blue)
    - --spectrum-3: #5225ed (indigo)
    - --spectrum-4: #e434dc (magenta)
    - --spectrum-5: #fd3aa9 (pink)
    - --spectrum-6: #f98472 (coral)
    - --spectrum-7: #fcbe72 (amber)
- Ink surface (dark): background #05070c, card #0a0d15, text #f5f6fa, muted text #a3abbd, border rgba(255,255,255,0.08).
- Paper surface (light): background #f3f0ea, card #fbfaf7, text #0c0e14, muted text #4a4f5c, border rgba(12,14,20,0.12).
- Fonts:
    - Display and body: Figtree (400, 500, 600, 700), falling back to ui-sans-serif, system-ui.
    - Emphasis: Fraunces italic, for one or two words of a heading.
    - Labels and code: JetBrains Mono (400, 500), uppercase labels with 0.14em tracking.
- Shape: radius 8 to 12px on cards and panels; pills may be fully round. Hairline borders, soft glow instead of heavy shadow.
- Motion: animate transform and opacity only; fast ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 140ms for micro-interactions, 320 to 520ms for reveals.

Art and media
- Built from HTML, CSS and inline SVG only; no image files or video.

Props
- `title`: `string` (default "Get set up"). The checklist's heading.
- `tasks`: `{ id: string; title: string; hint?: string; done?: boolean }[]`. The steps and whether they are done.
- `accent`: `string` (default "blue"). The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
- `className`: `string`. Merged with cn(); give it a width.

Behaviour and access
- Reduced motion: Nothing animates on its own.
- Keyboard: Tab moves between tasks; Space ticks.
- Screen readers: Semantic elements with accessible names; decorative marks are hidden.
- Touch: Targets are 36 px or larger; nothing depends on hover.
- Budget: about 1 KB of JavaScript, WebGL none, GPU none. It pauses while off screen.

Theming
Everything reads `--app-accent` (set by the `accent` prop, or by a parent) and the mode's tokens, so light and dark and any brand colour work without code changes. Pass a named accent or any CSS colour; Launchpad sets it once per app from the client's theme.

Usage
```tsx
import { SetupChecklist } from "@/components/vibebox/setup-checklist";

<SetupChecklist accent="#7c5cff" />
```

Notes
Add the VibeBox Motion Setup Checklist with `npx shadcn@latest add @vibebox/setup-checklist`. Seed `done` from your user's state. Set the brand colour once with `--app-accent` on a parent (or the `accent` prop). It follows light and dark through the tokens; keep the licence header.

Rules
- Keep the licence header on every installed file.
- Original code only: do not copy components from other libraries, and do not add GSAP.
- Use tokens for colour, type and radius; no hard-coded brand values.
- Server Components by default; `"use client"` only for the island.

Code

2 files

components/vibebox/setup-checklist/index.tsx

/**
 * VibeBox Motion · Setup Checklist
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { SetupChecklist, type SetupChecklistProps } from "./setup-checklist.client";

components/vibebox/setup-checklist/setup-checklist.client.tsx

/**
 * VibeBox Motion · Setup Checklist
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { accentStyle } from "@/lib/vibebox/app-accent";

export type SetupTask = { id: string; title: string; hint?: string; done?: boolean };
export type SetupChecklistProps = { title?: string; tasks?: SetupTask[]; accent?: string; className?: string };

const SAMPLE: SetupTask[] = [
  { id: "hours", title: "Set your opening hours", hint: "So clients can only book real slots.", done: true },
  { id: "services", title: "Add your services", hint: "A name, a length and a price each." },
  { id: "payments", title: "Connect payments", hint: "Take a deposit when someone books." },
  { id: "share", title: "Share your booking link" },
];

/** A setup checklist with a progress bar; tasks can be ticked and the bar follows. */
export function SetupChecklist({ title = "Get set up", tasks = SAMPLE, accent, className }: SetupChecklistProps) {
  const [done, setDone] = useState<Record<string, boolean>>(() => Object.fromEntries(tasks.map((t) => [t.id, Boolean(t.done)])));
  const count = tasks.filter((t) => done[t.id]).length;
  return (
    <section data-vb="setup-checklist" style={accentStyle(accent)} aria-labelledby="vb-setup-title" className={cn("grid gap-3 rounded-xl border border-border bg-card p-4", className)}>
      <div className="flex items-baseline justify-between">
        <h2 id="vb-setup-title" className="text-body font-semibold">{title}</h2>
        <span className="font-mono text-caption text-muted-foreground">{count} of {tasks.length}</span>
      </div>
      <div role="progressbar" aria-valuemin={0} aria-valuemax={tasks.length} aria-valuenow={count} aria-label="Setup progress" className="h-1.5 overflow-hidden rounded-full bg-muted">
        <div className="h-full origin-left rounded-full bg-[var(--app-accent)] transition-transform duration-300" style={{ transform: `scaleX(${count / tasks.length})` }} />
      </div>
      <ul className="grid">
        {tasks.map((t) => (
          <li key={t.id}>
            <label className="flex cursor-pointer items-start gap-3 rounded-lg px-2 py-2.5 hover:bg-accent/60">
              <input type="checkbox" checked={Boolean(done[t.id])} onChange={() => setDone((d) => ({ ...d, [t.id]: !d[t.id] }))} className="mt-0.5 size-4 shrink-0 accent-[var(--app-accent)]" />
              <span className="grid gap-0.5 text-small"><span className={cn("font-medium", done[t.id] && "text-muted-foreground line-through")}>{t.title}</span>{t.hint && <span className="text-caption text-muted-foreground">{t.hint}</span>}</span>
            </label>
          </li>
        ))}
      </ul>
    </section>
  );
}

Props

Prop	Type	Default	Description
title	string	"Get set up"	The checklist's heading.
tasks	{ id: string; title: string; hint?: string; done?: boolean }[]	—	The steps and whether they are done.
accent	string	"blue"	The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
className	string	—	Merged with cn(); give it a width.

Accessibility and motion

Keyboard: Tab moves between tasks; Space ticks.
Screen readers: Semantic elements with accessible names; decorative marks are hidden.
Touch: Targets are 36 px or larger; nothing depends on hover.
Reduced motion: Nothing animates on its own.

Edge cases and limits

State is local; persist it in your own layer.

Activity Feed
Free
A list of who did what and when, with initials in the accent.
Data · Server
Agent Activity
Free
A timeline of what an agent is doing: done steps ticked, the running one spinning, the rest queued.
AI and agents · Server
App Sidebar
Free
An app sidebar with a brand, titled groups of links, badges and the current page in the accent.
Navigation · Server