Components · Screens

First runOnboarding

Onboarding in up to three steps, each in 1100 × 700

npx shadcn@latest add @umbra/onboarding

The first-run frame: window background, step dots at the top, a tile up to 600 px with the step content below. Each step holds one task: a cover (Showcase 8:3), a title, a hint, one main action. The product owns the step logic (what to check, when to move on); the component handles the look and the transitions

When to use

  • First run: an intro with a live demo, permissions (microphone), “Almost ready” with real progress
  • A short wizard of up to three steps, where each step is one decision by the person

When not to use

  • Settings and long forms: Page
  • A single message: NoticeCard
  • A processing screen after an action: a centered tile with Showcase 2:1 and facts

Press “Record”, ShadeNotes does the rest

Do

  • Start downloads and checks on the first step, while the person is reading
  • Report an uncertain status honestly: “We’ll check on the first recording”, not “Access granted”
  • Keep “ShadeNotes” and prepositions together: use a non-breaking space in strings

Don’t

  • More than three steps, scrolling inside a step, a step that doesn’t fit in 1100 × 700
  • Fake progress or delays for the sake of animation: show only the real status
  • A disabled main button as a faded accent: it’s neutral gray