Onboarding illustrationPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/onboarding-illustration

• Markdown: https://ui.xzero.co.uk/components/blocks/onboarding-illustration/markdown

• Access: Xzero Pro

• Registry id: onboarding-illustration

• Source file: registry/blocks/onboarding-illustration/onboarding-illustration.tsx

• Keywords: react onboarding, onboarding modal, welcome dialog, first run experience, onboarding steps illustration, animated svg onboarding

Use this as a first-run dialog in a document product. Swap the copy for your own steps and send Get started to your workspace creation flow; the preview creates nothing.

When to use

• A short first-run dialog in a document or workspace product.
• Onboarding with three or four steps that each need a simple picture.

When not to use

• Use onboarding-checklist for tasks people complete over time.
• Use feature-illustration for a feature section on a marketing page.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/onboarding-illustration

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { OnboardingIllustration } from "@/components/xzero/blocks/onboarding-illustration/onboarding-illustration";

export function FirstRun() {
  return (
    <div role="dialog" aria-label="Welcome">
      <OnboardingIllustration />
    </div>
  );
}

API reference

OnboardingIllustration

A compact onboarding card whose line illustration morphs through four steps, with back and next buttons, step dots, and a Get started action. The copy is sample content and Get started creates nothing.

No props.

Keyboard interactions

Keys	Action
Arrow Left / Right	Go to the previous or next step.

Accessibility

• The illustration is role="img" with a label describing the current scene.
• Step copy sits in a polite live region, so step changes are read out.
• Step dots are labelled buttons with aria-current on the active step.

Motion

• The same line shapes morph between folder, files, team, and badge scenes on springs.
• Reduced motion jumps to each scene without the morph.

Responsive behavior

• Below 440px padding tightens, the Back label becomes an icon, and the copy keeps a fixed minimum height so buttons do not jump.
• The illustration's pointer parallax runs only for a mouse on hover-capable devices.

Performance

• The scenes are one inline SVG whose shapes morph on springs, with no images to load.

Notes for AI

• Use as a first-run dialog in a document or workspace product.
• Swap the step copy and scene labels for your own, and route Get started to your workspace creation flow.
• Has no Xzero component dependencies.

Related

• Onboarding checklist: Guide a new workspace through setup, one step at a time.
• Stepper: Show where a person is in a multi-step flow and what is done.
• Empty states: Four empty states in one illustration whose shapes morph between scenes as you switch tabs.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt