Onboarding illustration
ProA compact onboarding card whose line illustration morphs from folder to files, team, and badge.
Create your first workspace
Each project gets one home. Start with Q3 vendor contracts and add files whenever you’re ready.
Step 1 of 4- A short first-run dialog in a document or workspace product.
- Onboarding with three or four steps that each need a simple picture.
- Use onboarding-checklist for tasks people complete over time.
- Use feature-illustration for a feature section on a marketing page.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
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.
import { OnboardingIllustration } from "@/components/arc/blocks/onboarding-illustration/onboarding-illustration"; export function FirstRun() { return ( <div role="dialog" aria-label="Welcome"> <OnboardingIllustration /> </div> );}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.
- Arrow LeftorRight
- Go to the previous or next step.
- 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.
- The same line shapes morph between folder, files, team, and badge scenes on springs.
- Reduced motion jumps to each scene without the morph.
- 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.
- The scenes are one inline SVG whose shapes morph on springs, with no images to load.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc component dependencies.
The full library index for assistants is at /llms.txt.