# Vertical Wizard

Multi-step wizard with the steps in a fixed left rail that stays visible while the form scrolls, plus a side panel whose guidance follows the focused field. Suits long or unequal steps carrying uploads, previews, and dense review metadata. As width tightens the guidance drops first, then the rail rotates into a horizontal stepper above the form.

UI demo only: authentication, payments, AI responses, uploads and navigation are not connected to production services. Keep the Meta MIT notice. Media comes from the pinned Astryx repository; copy the media directory with its license or replace /resource-previews/astryx/ paths with your own assets. See /resource-previews/astryx/media/manifest.json for provenance. Template body copy stays in its original language. Three upstream draft templates are labeled experimental.

Status: ready

## Dependencies

```sh
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0 @heroicons/react@2.2.0
```

## Scaffold the upstream template

```sh
npx @astryxdesign/cli@0.7.1 template form-wizard-vertical ./src/templates/form-wizard-vertical
```

Run in the consumer project. Inspect the target directory first; never overwrite existing files. npm installs dependencies; the CLI scaffolds template source.

First configure React 19, base CSS and a Theme provider. [Setup](/resources/astryx/docs/getting-started)

Uses prebuilt Astryx component styles.

License: MIT
Source: @astryxdesign/cli@0.7.1/packages/cli/assets/templates/pages/form-wizard-vertical/page.tsx


---

Index of all JGuang resources: https://jiguang132.com/llms.txt