Stepper

The ownable Stepper install gives your app a local wrapper, editable template, and nearby style surface for progress flows while keeping the TailNG root slot contract close to the product feature that owns the step rows.

Why own Stepper locally

Stepper usually becomes product-specific once teams add completion badges, validation messaging, branch-specific copy, or clickable stage rows. Local ownership keeps those step semantics versioned beside the workflow they describe.

Adjust step-row markup, badges, and connectors without waiting on a package release.
Keep checkout, release, or onboarding flow copy close to the feature that owns it.
Iterate on local shell styling while preserving the shared root slot contract underneath.

What the install includes

The registry-backed stepper install writes the local wrapper component, template, styles, primitive bridge file, and export barrel under your app so the generated source can evolve with the surrounding progress pattern.

Ownable Install

Install Stepper from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add stepper

npx tailng add stepper

Generated files

The command scaffolds local files under src/app/tailng-ui/stepper.

src/app/tailng-ui/stepper/tng-stepper-primitive.ts
src/app/tailng-ui/stepper/tng-stepper.ts
src/app/tailng-ui/stepper/tng-stepper.html
src/app/tailng-ui/stepper/tng-stepper.css
src/app/tailng-ui/stepper/index.ts

Import in your feature module/component

import { TngStepper, TngStepperPrimitive } from './tailng-ui/stepper';

Usage

<tng-stepper ariaLabel="Release flow">
  <ol class="release-stepper-list">
    <li class="release-stepper-item is-complete"><span>✓</span> Draft</li>
    <li aria-current="step" class="release-stepper-item is-current"><span>2</span> Review</li>
    <li class="release-stepper-item"><span>3</span> Publish</li>
  </ol>
</tng-stepper>