Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Onboarding

First-run flows: workspace setup, a publication with a progress rail, a product tour in a dialog and connecting a coding agent.

Blocks@gaudi/design-system/blocks/ScreensView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Onboarding from '@gaudi/design-system/blocks/Screens';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/screens-coding-agent.json.

Usage

import Wizard from '@gaudi/design-system/blocks/Wizard';
<Wizard title='Set up your workspace' steps={steps} onComplete={createWorkspace}>  {stepIndex => panels[steps[stepIndex].id]}</Wizard>

Examples

Connect a coding agent

Storybook

Tour in a dialog

Storybook

Create a publication

Storybook

Workspace setup

Storybook

API

4 props

Accessibility

Let people skip or come back to optional steps, keep focus on the step heading when it changes, and never trap focus outside a dialog tour.

ProfileAccount and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.5 examplesSettingsSettings pages: preferences in collapsible sections, notification channels, integrations with connect toggles, and developer keys and webhooks.4 examplesScreensFull-screen frames for sign-in, sign-up and onboarding: the main column beside an optional aside for imagery, quotes or logos, plus header and footer bands. Profile, settings, wizard, onboarding and auth examples compose it with AuthForm, Wizard and Core parts.FieldField composes form label, description, error, and input building blocks.7 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examples