TailNG — Angular UI with Tailwind

Overview

tng-stepper is a headless stepper: use tng-step for each step header and tng-step-panel with [index] for content. Controlled via [activeIndex] or uncontrolled with defaultIndex. linear mode requires steps to be marked complete before advancing. orientation: horizontal | vertical.

Quick example

Basic

HTML

CSS


<tng-stepper defaultIndex="0">
  <tng-step>One</tng-step>
  <tng-step>Two</tng-step>
  <tng-step>Three</tng-step>
  <tng-step-panel [index]="0">Step 1 content</tng-step-panel>
  <tng-step-panel [index]="1">Step 2 content</tng-step-panel>
  <tng-step-panel [index]="2">Step 3 content</tng-step-panel>
</tng-stepper>

import { TngStepper, TngStep, TngStepPanel } from '@tailng-ui/ui/navigation';

One

Two

Three

Step 1 content

Features

Steps & panels

tng-step = header (click to activate). tng-step-panel [index] = content for that step. (activeIndexChange) for controlled usage.

Linear & orientation

linear: can't jump forward until previous steps are complete. orientation: horizontal | vertical. TngStep: label, complete, disabled, slot-based styling.