---
url: "https://vueda.dev/v3/reference/theming/keys/StepperIndicator.md"
title: "StepperIndicator"
---

# StepperIndicator

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.

Vue component: [StepperIndicator](/v3/reference/api/vue/StepperIndicator.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/StepperIndicator.md#theme-key-StepperIndicator-root) | 4 classes | The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract. |

<a id="theme-key-StepperIndicator-root"></a>

## root

> The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.

Default classes:

```text
inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8
group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50
group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground
group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground
```

Source: `client/lib/theme/vueda-tailwind/shell/StepperIndicator.theme.js:18`