Zudoku
Documentation

Stepper

A vertical stepper component that displays a sequence of steps with automatic numbering and visual connections between steps. Perfect for multi-step processes, tutorials, or guided workflows.

In MDX components, the Stepper component is available by default and doesn't need an explicit import.

Import

ReactCode
import { Stepper } from "zudoku/ui/Stepper";

Usage

Wrap Markdown lists with the Stepper component to create a vertical stepper like this:

ReactCode
<Stepper>

1. **Identify the Problem**
1. **Plan Your Project**
1. **Build Your Solution**
1. **Test and Deploy**

</Stepper>
  1. Identify the Problem
  2. Plan Your Project
  3. Build Your Solution
  4. Test and Deploy

Table of Contents

Steps are anchorable and show up in the "On this page" sidebar, nested one level below the heading they follow:

Stepper placed after…Steps appear as…
The page title (or no heading at all)Top-level entries
An h2Sub-entries of that h2
An h3 or deeperNothing — the same cut-off an h4 heading hits

That means a page that is nothing but a stepper (a tutorial, for example) gets a usable table of contents automatically, while a stepper buried inside an existing section doesn't flood it.

Each step's title — the first line of the list item — becomes the entry. A step whose first block isn't text (a code block, for instance) is skipped.

Opting out

Set toc={false} for a stepper that is a quick checklist rather than a section of the page worth linking to:

ReactCode
<Stepper toc={false}>

1. **Find the reason code**
1. **Look up the code**
1. **Re-file**

</Stepper>

Advanced Example

  1. Identify the Problem

    Begin by identifying the problem you're trying to solve. This foundational step ensures you're building the right solution for your needs.

  2. Plan Your Project

    Define your project requirements and goals. This ensures you're building the right solution for your needs.

    Make sure you have gathered all the information you need before you start planning your project.

  3. Build Your Solution

    With a solid plan in place, start implementing your solution. Break down complex tasks into manageable pieces and track your progress.

    • Create component structure
    • Implement core functionality
    • Add styling and polish

  4. Test and Deploy 🚀

    TerminalCode
    pnpm build
pnpm test
pnpm deploy --prod
See Markdown for example above 👆
Code
<Stepper> 1. **Identify the Problem** Begin by identifying the problem you're trying to solve. This foundational step ensures you're building the right solution for your needs. 1. **Plan Your Project** Define your project requirements and goals. This ensures you're building the right solution for your needs. :::info Make sure you have gathered all the information you need before you start planning your project. ::: 1. **Build Your Solution** With a solid plan in place, start implementing your solution. Break down complex tasks into manageable pieces and track your progress. - Create component structure - Implement core functionality - Add styling and polish 1. **Test and Deploy** 🚀 <!-- prettier-ignore-start --> ```sh pnpm build pnpm test pnpm deploy --prod ``` <!-- prettier-ignore-end --> </Stepper>
Last modified on
Sidecar BoxSyntax Highlight