 <WizardDialog.Root>
  <WizardDialog.Trigger>
    <Button>Open wizard</Button>
  </WizardDialog.Trigger>
  <WizardDialog.Content size="5">
    <WizardDialog.Split>
      <WizardDialog.Sidebar>
        <WizardDialog.SidebarHeader
          title="Create connection"
          description="Complete each step to connect your identity provider."
        />
        <Flex asChild direction="column" gap="2">
          <nav aria-label="Steps">
            <Text size="2" weight="bold">
              Step 1 · Details
            </Text>
            <Text color="gray" size="2">
              Step 2 · Review
            </Text>
          </nav>
        </Flex>
      </WizardDialog.Sidebar>
      <WizardDialog.Main>
        <WizardDialog.Body>
          <Text as="p" mb="3">
            Place the active step’s fields or instructions here. Long content
            scrolls inside the body while the sidebar and footer stay visible on
            larger viewports.
          </Text>
          <Text as="p">
            Use the same form and validation patterns as the standard dialog.
          </Text>
        </WizardDialog.Body>
        <WizardDialog.Footer>
          <WizardDialog.Close>
            <Button variant="outline">Cancel</Button>
          </WizardDialog.Close>
          <Button color="purple" type="button">
            Next
          </Button>
        </WizardDialog.Footer>
      </WizardDialog.Main>
    </WizardDialog.Split>
  </WizardDialog.Content>
</WizardDialog.Root>

API Reference

This component uses the same Radix Dialog primitive as Dialog for Root, Trigger, Close, and Content. View source

Root, Trigger, Close

Same behavior as Dialog.

Content

Prop	Type	Default
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6'`	`'5'`

Width mapping matches Dialog.Content. Padding defaults to 0 on the content surface so the sidebar and body control spacing; use className or inner layout components if you need extra padding on the shell.

Split

Horizontal split on sm and up; stacks vertically on smaller viewports. Wraps Sidebar and Main.

Left rail for the wizard title block (SidebarHeader), step list, or other navigation. Renders with internal padding.

SidebarHeader

Prop	Type	Default
`title`	`React.ReactNode`	required
`description`	`React.ReactNode`
`error`	`React.ReactNode`
`children`	`React.ReactNode`

Same responsibilities as Dialog.Header for title, optional description, and optional error callout.

Main

Right column wrapper. Place Body then Footer inside so actions only span the main column.

Body

Same scroll behavior as Dialog.Body, including the optional scrollable prop.

Right-column actions only (typically aligned to the end). Uses the same flex alignment pattern as Dialog.Footer.

Layout

 ┌─────────────┬──────────────────┐
│  Sidebar    │  Body (scrolls)  │
│  + header   │                  │
│  + steps    │                  │
│             ├──────────────────┤
│             │  Footer          │
└─────────────┴──────────────────┘

Design rationale

See packages/design-system/docs/design/components/wizard-dialog.md.