Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Wizard

A guided multi-step form with validation, progress and recoverable completion.

Blocks@gaudi/design-system/blocks/WizardView 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 Wizard from '@gaudi/design-system/blocks/Wizard';

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

Usage

import Wizard from '@gaudi/design-system/blocks/Wizard';
<Wizard steps={steps} validateStep={validateStep} onComplete={save}>  {stepIndex => steps[stepIndex].id === 'details' ? detailsForm : review}</Wizard>

Examples

Add a product

Storybook

Plan upgrade

Storybook

Send an invoice

Storybook

Send money

Storybook

Invite your team

Storybook

Vendor onboarding

Storybook

API

12 props

Accessibility

Announce the active step, errors and completion. Keep entered values when validation or saving fails.

FlowA node-and-edge canvas for workflows, pipelines, agent trees and driver maps, themed with Gaudi tokens and built on React Flow.5 examplesNavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.FieldField composes form label, description, error, and input building blocks.7 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesTableSemantic article tables with contained horizontal scrolling.7 examplesNumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examples