Get started →

    Steps

    The <Steps> component creates a vertical timeline layout for sequential instructions. Each <Step> renders a numbered circle indicator with a connecting line, a title, and optional body content.

    Basic

    Code

    import { Steps, Step } from '@theme'

<Steps>
  <Step title="Install the package">Run `pnpm add ciderpress` to install ciderpress.</Step>
  <Step title="Create a config file">Add a `ciderpress.config.ts` file to your project root.</Step>
  <Step title="Build your docs">Run `pnpm build` to generate your documentation site.</Step>
</Steps>

    Output

    1

    Install the package

    Run pnpm add ciderpress to install ciderpress.
    2

    Create a config file

    Add a ciderpress.config.ts file to your project root.
    3

    Build your docs

    Run pnpm build to generate your documentation site.

    With icons

    Use the icon prop to replace the step number with an Iconify icon.

    Code

    <Steps>
  <Step title="Download" icon="pixelarticons:download">
    Download the CLI from the releases page.
  </Step>
  <Step title="Configure" icon="pixelarticons:sliders">
    Set up your project configuration.
  </Step>
  <Step title="Launch" icon="pixelarticons:zap">
    Start the development server.
  </Step>
</Steps>

    Output

    Download

    Download the CLI from the releases page.

    Configure

    Set up your project configuration.

    Launch

    Start the development server.

    With rich content

    Steps can contain arbitrary MDX content, including code blocks.

    Code

    <Steps>
  <Step title="Install dependencies">

```bash
pnpm add ciderpress
```

  </Step>
  <Step title="Add your config">

```ts
import { defineConfig } from 'ciderpress'

export default defineConfig({
  title: 'My Docs',
})
```

  </Step>
  <Step title="Start writing">
    Create `.mdx` files in your docs directory.
  </Step>
</Steps>

    Output

    1

    Install dependencies

    pnpm add ciderpress
    2

    Add your config

    import { defineConfig } from 'ciderpress'

export default defineConfig({
  title: 'My Docs',
})
    3

    Start writing

    Create .mdx files in your docs directory.

    Custom title size

    Use titleSize on the <Steps> wrapper to change the heading level for all step titles.

    Code

    <Steps titleSize="h2">
  <Step title="Large titles">These titles render as h2 elements.</Step>
  <Step title="Consistent sizing">All steps in this group share the same heading level.</Step>
</Steps>

    Output

    1

    Large titles

    These titles render as h2 elements.
    2

    Consistent sizing

    All steps in this group share the same heading level.

    Steps props

    PropTypeRequiredDefaultDescription
    titleSize'h2' | 'h3' | 'p'no'h3'Heading level for step titles
    childrenReactNodeyes---Step children to render in timeline

    Step props

    PropTypeRequiredDefaultDescription
    titlestringyes---Title displayed next to the step indicator
    iconstringno---Iconify icon ID, replaces the number in the circle
    stepNumbernumbernoautoExplicit step number override
    childrenReactNodeyes---Content rendered below the step title