Stepper - Dreamy UI

Stepper

Stepper is used to guide users through multi-step processes like registration flows, checkout, or onboarding.

#

Installation

npx dreamy add stepper

pnpm dlx dreamy add stepper

yarn dlx dreamy add stepper

bunx dreamy add stepper

#

Usage

Stepper guides users through a sequence of steps.

1
Account
2
Profile
3
Done

Step 1: Account

<Stepper.Root count={3}>
    <Stepper.List>
        {["Account", "Profile", "Done"].map((title, index) => (
            <Stepper.Item key={index} index={index}>
                <Stepper.Trigger index={index}>
                    <Stepper.Indicator index={index} />
                    <Stepper.Title>{title}</Stepper.Title>
                </Stepper.Trigger>
                <Stepper.Separator index={index} />
            </Stepper.Item>
        ))}
    </Stepper.List>
    {["Account", "Profile", "Done"].map((title, index) => (
        <Stepper.Content key={index} index={index}>
            Step {index + 1}: {title}
        </Stepper.Content>
    ))}
    <Stepper.CompletedContent>All steps complete!</Stepper.CompletedContent>
    <HStack mt={4}>
        <Stepper.PrevTrigger asChild>
            <Button variant="outline" size="sm">Prev</Button>
        </Stepper.PrevTrigger>
        <Stepper.NextTrigger asChild>
            <Button size="sm">Next</Button>
        </Stepper.NextTrigger>
    </HStack>
</Stepper.Root>

#

Variants

Use the variant prop to change the appearance of the stepper.

Solid

Account
2
Profile
3
Done

Subtle

Account
2
Profile
3
Done

<Stepper.Root count={3} variant="solid">...</Stepper.Root>
<Stepper.Root count={3} variant="subtle">...</Stepper.Root>

#

Sizes

Use the size prop to change the size of the stepper.

Account
2
Profile
3
Done

Account
2
Profile
3
Done

Account
2
Profile
3
Done

<Stepper.Root count={3} size="sm">...</Stepper.Root>
<Stepper.Root count={3} size="md">...</Stepper.Root>
<Stepper.Root count={3} size="lg">...</Stepper.Root>

#

Vertical

Use the orientation="vertical" prop to render the stepper vertically.

1
Account
2
Profile
3
Done

Step 1: Account

<Stepper.Root count={3} orientation="vertical" h="300px">
    <Stepper.List>
        {["Account", "Profile", "Done"].map((title, index) => (
            <Stepper.Item key={index} index={index}>
                <Stepper.Trigger index={index}>
                    <Stepper.Indicator index={index} />
                    <Stepper.Title>{title}</Stepper.Title>
                </Stepper.Trigger>
                <Stepper.Separator index={index} />
            </Stepper.Item>
        ))}
    </Stepper.List>
    <VStack align="flex-start">
        {steps.map((step, index) => (
            <Stepper.Content key={index} index={index}>{step.content}</Stepper.Content>
        ))}
        <Stepper.CompletedContent>All steps complete!</Stepper.CompletedContent>
    </VStack>
</Stepper.Root>

#

With Description

Add a Stepper.Description inside each step for more detail.

Account
Enter your email
2
Profile
Set up your profile
3
Done
You're all set!

<Stepper.Root count={3}>
    <Stepper.List>
        {steps.map((step, index) => (
            <Stepper.Item key={index} index={index}>
                <Stepper.Trigger index={index}>
                    <Stepper.Indicator index={index} />
                    <Box>
                        <Stepper.Title>{step.title}</Stepper.Title>
                        <Stepper.Description>{step.description}</Stepper.Description>
                    </Box>
                </Stepper.Trigger>
                <Stepper.Separator index={index} />
            </Stepper.Item>
        ))}
    </Stepper.List>
</Stepper.Root>

#

Controlled

Use the step and onStepChange props to control the current step.

1
Account
2
Profile
3
Done

Step 1: Account

export function ControlledStepper() {
    const [step, setStep] = useState(0);
 
    return (
        <Stepper.Root count={3} step={step} onStepChange={setStep}>
            <Stepper.List>
                {["Account", "Profile", "Done"].map((title, index) => (
                    <Stepper.Item key={index} index={index}>
                        <Stepper.Trigger index={index}>
                            <Stepper.Indicator index={index} />
                            <Stepper.Title>{title}</Stepper.Title>
                        </Stepper.Trigger>
                        <Stepper.Separator index={index} />
                    </Stepper.Item>
                ))}
            </Stepper.List>
            {["Account", "Profile", "Done"].map((title, index) => (
                <Stepper.Content key={index} index={index}>
                    Step {index + 1}: {title}
                </Stepper.Content>
            ))}
            <Stepper.CompletedContent>All done!</Stepper.CompletedContent>
            <HStack mt={4}>
                <Stepper.PrevTrigger asChild>
                    <Button variant="outline" size="sm">Prev</Button>
                </Stepper.PrevTrigger>
                <Stepper.NextTrigger asChild>
                    <Button size="sm">Next</Button>
                </Stepper.NextTrigger>
            </HStack>
        </Stepper.Root>
    );
}

#

Context

Use Stepper.Context to access the stepper state from within any child component.

Step 1 of 3

1
Account
2
Profile
3
Done

Step 1: Account

<Stepper.Root count={3}>
    <Stepper.Context>
        {({ step, count }) => (
            <Text>Step {step + 1} of {count}</Text>
        )}
    </Stepper.Context>
    ...
</Stepper.Root>

Stat

Switch