I'll create a reusable Stepper component using shadcn/ui. This component will allow users to navigate through a series of steps, showing progress and allowing navigation between steps.

This Stepper component is now ready to use in your shadcn/ui project. Here's a breakdown of what we've created:

1. The Stepper component:

   • Takes an array of steps, the current step, and a function to change steps as props.
   • Renders each step using the Step component.
   • Provides "Previous" and "Next" buttons for navigation.

2. The Step component:

   • Displays the step title, description, and completion status.
   • Uses different styles based on whether the step is completed, active, or inactive.

3. The StepperDemo page:

   • Demonstrates how to use the Stepper component in a real application.
   • Manages the current step state and updates it when navigating.

To use this Stepper in your project:

1. Copy the stepper.tsx file into your components/ui directory.
2. Use the Stepper component in your pages or components, passing in the necessary props.

The Stepper is responsive, collapsing to a vertical layout on smaller screens. It's also accessible, with clear visual indicators for the current and completed steps.

You can further customize the appearance by adjusting the Tailwind classes or adding more props to control the styling.