Kanshō/Step indicator

Step indicator

Compact horizontal progress for short guided flows: numbered dots joined by connectors, done steps checked, the current step ringed with aria-current. Presentation only — the host owns navigation.

Included in the single kansho full pack. Components are not offered as separate installs.

Interactive

drive it with the buttons — states derive from `current`
  1. Agents
  2. Project
  3. Specialist key
  4. Done

Positions

first · middle · last
  1. Agents
  2. Project
  3. Specialist key
  4. Done
  1. Agents
  2. Project
  3. Specialist key
  4. Done
  1. Agents
  2. Project
  3. Specialist key
  4. Done

Component documentation

Step Indicator

components/ui/step-indicator.tsx

Purpose

Shows progress through a short ordered flow.

Appropriate use

Use for compact multi-step processes where the current position and completed steps matter.

Example

components/ui/step-indicator.tsx has a representative live example in the "Interactive" section on /components/step-indicator.

States

Derives done, current, and upcoming states from current and supports arbitrary labelled steps.

API and props

StepIndicator accepts steps, current, className, and aria-label; each StepIndicatorStep has id and label.

Dependencies

React, Lucide icons, and the Kansho cn utility.

Accessibility

Renders an ordered list, labels the progress group, marks the active item with aria-current=step, and hides decorative connectors and checks.

Limitations

It is display-only and does not validate navigation or allow direct step activation.

Source

Source: components/ui/step-indicator.tsx.

Full pack

components/ui/step-indicator.tsx is documented at /components/step-indicator and installs only through the single Kansho full pack; no individual component install is offered.