Onboarding

The first run for someone who just signed up. Four short steps in one card (the workspace, its tools, the team and a first agent) with a getting-started checklist beside it and a finish that says what is ready.

Get lifetime access to installPro screen · 5 examples · built from 11 Layro components

Open full screen

When to use

The first screen after sign-up in a workspace product
Setup that connects tools and invites people before the product is useful
Bringing someone back to finish what they skipped

When not to use

A single form: use Stepper inside your own page
Managing tools later on: use the Integrations screen

The decision inside it

Every step can be skipped, and nothing is forgotten

Skip for now moves on and the stepper marks the step Skipped. The checklist beside the flow, and on the home page afterwards, keeps what is left, so nobody is trapped in setup and nothing quietly goes undone.

Installation

Onboarding is a Pro screen, included with lifetime access. It is two files on top of the Layro components it is made of.

Add the components it uses:

npx shadcn@latest add @layro/stepper @layro/integration-picker @layro/member-card @layro/agent-settings @layro/setup-guide @layro/avatar @layro/button @layro/field @layro/input @layro/segmented-control @layro/select

Copy screens/onboarding-screen.tsx and screens/data/onboarding-screen.ts from the Code tab above into your project, at the same paths.
It also imports @/lib, @/demos/layro-mark and @/demos/brand-logos: Layro’s shared helpers and the demo’s sample images. Point them at your own.

Usage

app/page.tsx

import { OnboardingScreen } from "@/screens/onboarding-screen";

export default function Page() {
  /* A screen fills the box it is given: give it the window. */
  return (
    <main className="h-dvh">
      <OnboardingScreen className="h-full" />
    </main>
  );
}

Built from

Every Layro component this screen imports. Each has its own page, props and install command.

API reference

Read from OnboardingScreenProps when the site is built. It also takes every attribute a div does, such as className.

OnboardingScreen

Prop	Type	Notes
`state`	`OnboardingState`	Which moment of setup to open on. Default `default`.

Accessibility

The stepper says which step you are on and which were skipped
Fields have labels and errors are announced
Every step works from the keyboard, dialogs included
Movement follows the reduced-motion setting

Responsive behavior

Fills the box it is given: mount it at the window's height
The checklist moves under the steps on narrow widths
Light and dark come from the Layro theme: it follows the dark class on <html>, like every component.