Onboarding · Youj

Installation & usage

npx @youj/cli add app-onboarding

Also installs async-button, button, card, empty, field, grid-backdrops, icon-check-circle, icon-rocket, icon-sparkles, icon-user-plus, icon-x, illustrations, input, input-group, presence-list, radio-group, stepper, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/app/onboarding.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

onboarding-view.tsx

'use client'

import Link from 'next/link'
import { Onboarding, type OnboardingProps } from '@/blocks/app/onboarding'

export function OnboardingView({ presets }: Pick<OnboardingProps, 'presets'>) {
  return (
    <Onboarding
      presets={presets}
      copy={{ page: 'Set up your workspace' }}
      linkComponent={Link}
      onFinish={(setup) => {
        // your code
      }}
      onStepChange={(step) => {
        // your code
      }}
      onOpenDashboard={() => {
        // your code
      }}
    />
  )
}

Reference

Props13 props, 1 types

Props

Onboarding props
Prop	Type	Default
`onFinish`	`(setup: OnboardingSetup) => unknown` Creates the workspace from the answers; resolve to show "You're all set", throw to show why it failed. default a demo wait	`a demo wait`
`illustration`	`IllustrationSlot` The welcome step's picture: a scene from the illustrations by id, your own node, or `null` for the sparkles icon. default 'team'	`'team'`
`brand`	`{ name: string; logo?: ReactNode }` The product the welcome names. default Northwind	`Northwind`
`defaultValues`	`Partial<OnboardingSetup>` Answers filled in at the start, e.g. the company name from sign-up.	–
`presets`	`string[]` The theme presets to choose from, by id. default every preset	`every preset`
`step`	`number` The open step (0–3), controlled. Pair it with `onStepChange`.	–
`defaultStep`	`number` The step open at first, uncontrolled. default 0	`0`
`onStepChange`	`(step: number) => void` Called with the step a Back, Get started or Continue moves to.	–
`dashboardHref`	`string` Where "Open your dashboard" goes; without it the button calls `onOpenDashboard`.	–
`onOpenDashboard`	`() => void` Called from "Open your dashboard".	–
`linkComponent`	`ElementType` Renders the dashboard link, e.g. Next.js `Link`. default 'a'	`'a'`
`headingLevel`	`1 \| 2 \| 3` The page title's level (visually hidden); step titles sit one below. default 1	`1`
`copy`	`Partial<OnboardingCopy>` Any of the flow's strings, to rewrite or translate.	–

`OnboardingSetup`

OnboardingSetup props
Prop	Type	Default
`name`Required	`string`	–
`theme`	`string` The picked theme preset's id, else the app's own preset's; undefined when neither is a preset.	–
`invites`Required	`string[]`	–

Strings40 keys for copy

Built from11 components

Accessibilitylandmarks, headings, forms, progress

#Installation & usage

#Description

#Code

#Reference

Props

OnboardingSetup

Strings

Built from

Components used

#Accessibility

Installation & usage

Description

Code

Reference

`OnboardingSetup`

Accessibility