## Overview [#overview]
The `Stepper` component provides a visual representation of a multi-step process, allowing users to navigate through sequential steps with clear progress indication. It supports both horizontal and vertical orientations, controlled and uncontrolled states, and includes loading states for asynchronous operations.
## Usage [#usage]
```tsx
import {
Stepper,
StepperIndicator,
StepperItem,
StepperTitle,
StepperTrigger,
StepperDescription,
StepperSeparator,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx
Step OneStep Two
```
Using Cubitt's URL-state hooks, you can sync the stepper state with the URL by providing a `paramName`:
```tsx
// Current step synced with ?step=2
Account SetupProfile InfoComplete
// Advanced options:
console.log('Current step:', step)}
defaultValue={1}
>
{/* ... */}
```
## Examples [#examples]
### Basic Stepper [#basic-stepper]
A horizontal stepper with titles and descriptions.
```tsx
{[
{
step: 1,
title: "Step One",
description: "Desc for step one",
},
{
step: 2,
title: "Step Two",
description: "Desc for step two",
},
{
step: 3,
title: "Step Three",
description: "Desc for step three",
},
].map(({ step, title, description }) => (
