novixuiv0.1
Install

Recipes · Flows

Onboarding flow

A four-step checklist that celebrates progress. Each step is skippable — but skipping is honest, not hidden.

Preview

The exact composition below is what ships in production apps built on Nova.

Get started

2 of 4
  • Create workspace
  • Invite your team
  • Connect data
  • Ship your first flow

Source

tsx
export function OnboardingCard({ steps, progress }) {
  return (
    <Card className="max-w-md p-5">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold">Get started</h3>
        <Badge variant="outline" size="sm">{progress.done} of {progress.total}</Badge>
      </div>
      <div className="mt-3 h-1.5 rounded-full bg-subtle overflow-hidden">
        <div className="h-full bg-accent" style={{ width: `${(progress.done / progress.total) * 100}%` }} />
      </div>
      <ul className="mt-5 space-y-2">
        {steps.map((s) => (
          <StepRow key={s.id} step={s} />
        ))}
      </ul>
    </Card>
  );
}

Anatomy

  • Progress bar always visible so users know how much is left.
  • Completed steps stay in the list (crossed out) — visible progress is motivating.
  • 'Skip for now' as a ghost button, not hidden in a menu.
  • Celebrate the final step with a confetti burst or a state-change badge.