@styloviz/stepper

6 visual variants — default, pill, minimal, icon, dot, line — all free, plus horizontal/vertical orientation. Linear wizard mode, guard rules, and telemetry are available in the Pro package.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/stepper

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvStepperComponent } from '@styloviz/stepper';

@Component({
  standalone: true,
  imports: [SvStepperComponent],
  template: `
    <sv-stepper [items]="steps" [activeIndex]="step" (stepChange)="step = $event" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | items | StepperItem[] | [] | The steps to render (label, optional description, state). | | activeIndex | number (two-way) | 0 | 0-based active step index. Supports two-way binding via [(activeIndex)]. | | orientation | StepperOrientation | 'horizontal' | Layout: horizontal or vertical. | | variant | StepperVariant | 'default' | Visual variant (default, icon, dot, line, pill, minimal…). | | size | StepperSize | 'md' | Step size: sm, md or lg. | | mode | StepperMode | 'standard' | Navigation mode: standard sequence, or branch (conditional paths via activeBranch). | | interactive | boolean | true | Whether users can click steps to navigate. | | showDescriptions | boolean | true | Show step descriptions under labels. | | showConnectors | boolean | true | Render connectors between steps. | | enableHotkeys | boolean | false | Enables advanced keyboard shortcuts for rapid step navigation. | | activeBranch | string \| null (two-way) | null | Active branch key used in mode='branch'. Supports two-way binding. | | customClass | string | '' | Extra CSS classes for the root element. |

Outputs

| Output | Type | Description | | --- | --- | --- | | stepChange | StepperChangeEvent | Emitted when the active step changes. | | stepClick | { index: number; step: StepperItem } | Emitted when a step is clicked. | | stepBlocked | StepperBlockedEvent | Emitted when navigation to a step is blocked (e.g. linear validation). | | branchChange | StepperBranchChangeEvent | Emitted when the active branch changes (branch mode). |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/stepper

License

MIT