PyraUI logo
PyraUI
Playground

Wizard

Multi-step flows with progress, tone colors, and compact spacing options.

Basic Wizard

1
Personal Info
2
Account Details
3
Review

Step 1: Personal Information

Enter your personal details here.


          <.wizard id="signup-wizard" tone={:blue}>
            <:step id="step1" title="Personal Info" active={true}>
              <p>Step 1 content</p>
            </:step>
            <:step id="step2" title="Account Details">
              <p>Step 2 content</p>
            </:step>
            <:step id="step3" title="Review">
              <p>Step 3 content</p>
            </:step>
          </.wizard>

Tones

Indigo

1
Info
2
Details
3
Review

Violet

1
Info
2
Details
3
Review

Emerald

1
Info
2
Details
3
Review

Teal

1
Info
2
Details
3
Review

Rose

1
Info
2
Details
3
Review

Orange

1
Info
2
Details
3
Review 

          <.wizard id="flow" tone={:indigo} compact={true}>
            <:step id="s1" title="Info" active={true}><div class="h-24"></div></:step>
            <:step id="s2" title="Details"><div class="h-24"></div></:step>
            <:step id="s3" title="Review"><div class="h-24"></div></:step>
          </.wizard>

Options

Compact spacing compact=true
1
Start
2
Middle
3
End
Hide progress show_progress=false 

          <.wizard id="flow" tone={:slate} compact={true}>...</.wizard>
          <.wizard id="flow2" tone={:violet} show_progress={false}>...</.wizard>

Props

Prop Type Default Description
id string - Unique ID for the wizard
tone :blue | :indigo | :violet | :emerald | :teal | :rose | :orange | :slate :blue Color tone used for active/completed/progress and primary button
compact boolean false Use compact spacing
show_progress boolean true Show the top progress indicator
step.id string - Unique ID for each step
step.title string - Step title
step.active boolean false Whether the step is currently active
step.completed boolean false Whether the step is completed