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

# StepperSeparator

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

> The connector line between steps. It stays muted for upcoming or disabled steps and switches to accent after completion.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/StepperSeparator.md#theme-key-StepperSeparator-root) | 4 classes | The connector line between steps. It stays muted for upcoming or disabled steps and switches to accent after completion. |

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

## root

> The connector line between steps. It stays muted for upcoming or disabled steps and switches to accent after completion.

Default classes:

```text
flex-1 h-0.5 min-w-6 rounded-sm mt-4 transition-colors
bg-muted
group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50
group-data-[state=completed]:bg-accent
```

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