OnboardingChecklist

Code

import { OnboardingChecklist } from "@fadymondy/nasaq/web";export function GetStarted() {  return (    <OnboardingChecklist      items={[        { id: "profile", title: "Complete your profile", done: true },        { id: "invite", title: "Invite a teammate", description: "Work is better together.", actionLabel: "Invite", onAction: () => openInvite() },        { id: "connect", title: "Connect GitHub", actionLabel: "Connect", onAction: () => connect() },      ]}      onDismiss={() => hideCard()}    />  );}declare function openInvite(): void;declare function connect(): void;declare function hideCard(): void;

Onboarding · beta

Live examples and controls: OnboardingChecklist in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/onboarding-checklist.json

A card that lives in the app after the flow and shows what is left: "2 of 5 done". The first open item is highlighted as the next thing, each open item has one action, and finishing everything turns the card into a small celebration you can dismiss. It only reports clicks: you own which items are done. For a task list people edit, use Checklist.

When to useCopy Anchor Link

• A dashboard card that nudges the last setup steps.
• Steps skipped in the onboarding flow.

When not to useCopy Anchor Link

• Editable to-do lists: checklist.

ImportCopy Anchor Link

import { OnboardingChecklist } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { OnboardingChecklist } from "@fadymondy/nasaq/web";

export function GetStarted() {
  return (
    <OnboardingChecklist
      items={[
        { id: "profile", title: "Complete your profile", done: true },
        { id: "invite", title: "Invite a teammate", description: "Work is better together.", actionLabel: "Invite", onAction: () => openInvite() },
        { id: "connect", title: "Connect GitHub", actionLabel: "Connect", onAction: () => connect() },
      ]}
      onDismiss={() => hideCard()}
    />
  );
}

declare function openInvite(): void;
declare function connect(): void;
declare function hideCard(): void;

AnatomyCopy Anchor Link

OnboardingChecklist            data-slot="onboarding-checklist"
├─ header: title, "x of y done", dismiss
├─ Progress
└─ items: state mark, title, description, action   (data-next on the first open one)

APICopy Anchor Link

div props (except title) plus:

ExamplesCopy Anchor Link

First-run empty state

Pair the card with EmptyState on pages that have no data yet, and put the same action in both.

import { Button, EmptyState } from "@fadymondy/nasaq/web";

export const Empty = () => <EmptyState title="No projects yet" description="Create your first project to see it here." actions={<Button variant="primary">New project</Button>} />;

AccessibilityCopy Anchor Link

• It is a labelled region. Progress is a real progress bar with the "x of y" text as its name.
• Done and next are also stated to screen readers, not only by colour or icon.

RTL & i18nCopy Anchor Link

• English and Arabic built in; the action arrow mirrors.

Styling & tokensCopy Anchor Link

• Tokens only. Uses Card, Progress and Button.

Do / Don'tCopy Anchor Link

• Do keep it to five items or fewer.
• Do give every open item an action.
• Don't show it forever: offer onDismiss.

RelatedCopy Anchor Link

• onboarding-flow
• progress

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-onboarding-pages-checklist--docs