On this page

Steps

The Steps component helps create clear, visually connected lists of instructions or steps. It automatically numbers each step and creates visual connections between them, making it easy for readers to follow sequential content.

Basic Usage

Wrap your ordered list of steps inside the Steps component:

There is no need to import the component. It is automatically imported in mdx files using the astro-auto-import. Easy day for you!

Use it by wrapping an ordered list of steps with the <Steps> component.

<Steps>
  1. There is no need to import the component. It is automatically imported in `mdx` files using the `astro-auto-import`. Easy day for you!

  2. Use it by wrapping an ordered list of steps with the `<Steps>` component.

  3. This is a third step.
</Steps>

This is a third step.

Styling

The Steps component automatically handles:

Numbered circles for each step
Vertical connecting lines between steps
Proper spacing and alignment
Responsive layout

You can customize the appearance by passing a className:

There is no need to import the component. It is automatically imported in mdx files using the astro-auto-import. Easy day for you!
You can even pass custom classes to the <Steps> component. In this example, we add a my-16 class.

<Steps class="my-16">
  1. There is no need to import the component. It is automatically imported in `mdx` files using the `astro-auto-import`. Easy day for you!

  2. You can even pass custom classes to the `<Steps>` component. In this example, we add a `my-16` class.
</Steps>

Using with Other Components

The Steps component works seamlessly with other MDX components. Here’s an example using Tabs within steps:

First, set up your configuration based on your preferred theme:
Happy stepping!

This usage example looks like:

<Steps>
  1. First, set up your configuration based on your preferred theme:
      <Tabs defaultValue="light">
        <TabsList>
          <TabsTrigger value="light">Light</TabsTrigger>
          <TabsTrigger value="dark">Dark</TabsTrigger>
          <TabsTrigger value="system">System</TabsTrigger>
        </TabsList>
        <TabsContent value="light">
          Light theme uses a white background with dark text for optimal readability in bright environments.
        </TabsContent>
        <TabsContent value="dark">
          Dark theme uses a dark background with light text to reduce eye strain in low-light conditions.
        </TabsContent>
        <TabsContent value="system">
          System theme automatically matches your operating system's appearance settings.
        </TabsContent>
      </Tabs>

  2. Happy stepping!
</Steps>