---
title: Stepper
description: This section previews the stepper component.
---

In this guide, we utilize a custom `Stepper` component, specifically designed for AriaDocs, which enables users to display step-by-step instructions directly within the markdown render. 

## Preview
##

<Stepper>
  <StepperItem title="Step 1: Clone the AriaDocs Repository">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
  </StepperItem>
  <StepperItem title="Step 2: Access the Project Directory">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
  </StepperItem>
  <StepperItem title="Step 3: Install Required Dependencies">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.
  </StepperItem>
</Stepper>

## Code

```jsx
<Stepper>
  <StepperItem title="Step 1: Clone the AriaDocs Repository">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
  </StepperItem>
  <StepperItem title="Step 2: Access the Project Directory">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
  </StepperItem>
  <StepperItem title="Step 3: Install Required Dependencies">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.
  </StepperItem>
</Stepper>
```

