> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Stepper

> A horizontal progress stepper that displays a sequence of steps with completed, active, and upcoming states.

```tsx theme={null}
import { Stepper, StepperStep } from "@fanvue/ui";
import type {
  StepItem,
  StepperProps,
  StepperStepProps,
  StepperStepSize,
  StepperStepState,
} from "@fanvue/ui";
```

## Examples

## Small

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepper--small&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Stepper — Small" />
</Frame>

```tsx theme={null}
import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={1} size="sm" steps={threeSteps} />
```

## Without Descriptions

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepper--without-descriptions&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Stepper — Without Descriptions" />
</Frame>

```tsx theme={null}
import { Stepper } from "@fanvue/ui";

<Stepper
  activeStep={1}
  steps={[{ title: "Account" }, { title: "Profile" }, { title: "Review" }]}
/>
```

## All Completed

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepper--all-completed&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Stepper — All Completed" />
</Frame>

```tsx theme={null}
import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={3} steps={threeSteps} />
```

## Two Steps

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepper--two-steps&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Stepper — Two Steps" />
</Frame>

```tsx theme={null}
import { Stepper } from "@fanvue/ui";

<Stepper
  activeStep={1}
  steps={[
    { title: "Account", description: "Create account" },
    { title: "Profile", description: "Set up profile" },
  ]}
/>
```

## Large

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepper--large&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Stepper — Large" />
</Frame>

```tsx theme={null}
import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={1} size="lg" steps={threeSteps} />
```

## StepperStep — Without Labels

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepperstep--without-labels&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="StepperStep — Without Labels" />
</Frame>

```tsx theme={null}
import { StepperStep } from "@fanvue/ui";

<StepperStep state="active" stepNumber={2} />
```

## StepperStep — All States

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepperstep--all-states&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="StepperStep — All States" />
</Frame>

```tsx theme={null}
import { StepperStep } from "@fanvue/ui";

<div className="flex items-start gap-8">
  <StepperStep state="completed" stepNumber={1} title="Completed" description="Done" />
  <StepperStep state="active" stepNumber={2} title="Active" description="In progress" />
  <StepperStep state="upcoming" stepNumber={3} title="Upcoming" description="Not started" />
</div>
```

## StepperStep — All Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-stepperstep--all-sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="StepperStep — All Sizes" />
</Frame>

```tsx theme={null}
import { StepperStep } from "@fanvue/ui";

<div className="flex items-start gap-8">
  <StepperStep state="active" size="sm" stepNumber={1} title="Small" description="12px" />
  <StepperStep state="active" size="md" stepNumber={2} title="Medium" description="14px" />
  <StepperStep state="active" size="lg" stepNumber={3} title="Large" description="16px" />
</div>
```

## Props

## Stepper

A horizontal progress stepper that displays a sequence of steps with completed, active, and upcoming states.

<ParamField path="activeStep" type="number" required>
  Zero-based index of the currently active step. Steps before this are marked completed.
</ParamField>

<ParamField path="steps" type="StepItem[]" required>
  Configuration for each step.
</ParamField>

<ParamField path="size" type="&#x22;md&#x22; | &#x22;sm&#x22; | &#x22;lg&#x22;" default="md">
  Size preset applied to all step indicators and labels.
</ParamField>

## StepperStep

A single step indicator with optional labels, used standalone or within a `Stepper`.

<ParamField path="description" type="string">
  Secondary description shown below the title.
</ParamField>

<ParamField path="size" type="&#x22;md&#x22; | &#x22;sm&#x22; | &#x22;lg&#x22;" default="md">
  Size preset for the indicator and labels.
</ParamField>

<ParamField path="state" type="&#x22;active&#x22; | &#x22;completed&#x22; | &#x22;upcoming&#x22;" default="upcoming">
  Current state of the step.
</ParamField>

<ParamField path="stepNumber" type="number">
  Step number displayed in the indicator for active and upcoming states.
</ParamField>

<ParamField path="title" type="string">
  Primary label shown below the indicator.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `StepItem`, `StepperProps`, `StepperStepProps`, `StepperStepSize`, `StepperStepState`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)