# Onboarding

> A product's first minutes in one flow: set up a workspace, invite the team to it, then land in the app with a first-run checklist that already knows what was done.

Eased Pro (https://eased.dev/#pricing). Page: https://eased.dev/sets/onboarding

## Install the whole scene

The example installs every piece with it. Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/onboarding-scene
```

## The pieces

Each works alone. Workspace Setup and Team Invite sit on Onboarding Shell, and every piece runs on `useSteps` (in eased-onboarding-core, free, installed with each).

- [Workspace Setup](https://eased.dev/components/workspace-setup): An animated workspace setup flow for React and shadcn: name, URL with a live availability check, team and look, beside a preview that becomes the workspace.
  - Install: `npx shadcn add @eased-pro/workspace-setup`
  - Markdown: https://eased.dev/components/workspace-setup.md
- [Team Invite](https://eased.dev/components/team-invite): An animated team invite flow for React and shadcn: emails become chips with inline validation, a role per person and an invite link, beside a members table that fills in.
  - Install: `npx shadcn add @eased-pro/team-invite`
  - Markdown: https://eased.dev/components/team-invite.md
- [First-run Checklist](https://eased.dev/components/first-run-checklist): An animated first-run checklist for React and shadcn, docked in your app: items tick in any order as people do them, and it folds into a ring.
  - Install: `npx shadcn add @eased-pro/first-run-checklist`
  - Markdown: https://eased.dev/components/first-run-checklist.md
- [Onboarding Shell](https://eased.dev/components/onboarding-shell): An animated multi-step onboarding frame for React and shadcn, with segmented progress, Back, Skip and a live preview slot, on a headless step engine.
  - Install: `npx shadcn add @eased-pro/onboarding-shell`
  - Markdown: https://eased.dev/components/onboarding-shell.md

## Hand-offs

The flows share nothing but props. Workspace Setup's `onInvite` hands over the workspace it made, and Team Invite takes it as `workspace`; Team Invite's `onDone` reports what was sent, so the app ticks Invite your team with the checklist's `complete`. Each flow runs on `useSteps` from eased-onboarding-core (free) and also works alone. Show one flow at a time, and swap at once under reduced motion.

```tsx
export function Onboarding() {
  const [stage, setStage] = useState<"setup" | "invite" | "app">("setup");
  const [workspace, setWorkspace] = useState<Workspace>();
  const checklist = useFirstRunChecklist({ items: FIRST_RUN });

  // Into the app: setup is done, and the invite is if one went out.
  const land = (w: Workspace, invited: boolean) => {
    setWorkspace(w);
    checklist.complete("workspace");
    if (invited) checklist.complete("invite");
    setStage("app");
  };

  if (stage === "setup") {
    return (
      <WorkspaceSetup
        checkSlug={checkSlug}
        onCreate={createWorkspace}
        onInvite={(w) => {
          setWorkspace(w);
          setStage("invite");
        }}
        onOpen={(w) => land(w, false)}
      />
    );
  }
  if (stage === "invite") {
    return <TeamInvite workspace={workspace} onSend={sendInvites} onDone={(sent) => land(workspace!, sent.invites.length > 0)} />;
  }
  return (
    <App workspace={workspace}>
      <FirstRunChecklist checklist={checklist} onOpen={openPart} className="fixed bottom-4 end-4" />
    </App>
  );
}
```