Stepper

This section previews the stepper component.

The Stepper component is designed to create step-by-step guides with numbered steps, making it easy to present sequential instructions or processes. Each step is automatically numbered and visually connected with a vertical line, creating a clear flow.

Preview

The Stepper component uses Tailwind CSS for styling and is fully compatible with dark mode. The component automatically handles step numbering and visual connections between steps, making it perfect for documentation, tutorials, and guided workflows.

1

Step 1: Clone the NextBase 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.

2

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.

3

Step 3: Install Required Dependencies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.

Code

// In markdown directly use this
<Stepper>
  <StepperItem title="Step 1: Clone the NextBase 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>