# antuikit / Steps

> Steps with a neutral or primary `color`, pack glyphs for finish, error and `maxCount`, icons that scale with `size`, a vertical `type="inline"` rail with the kit's Tooltip, and a rounded `panel` arrow.

Docs: https://antuikit.com/docs/components/steps

## Install

npx antuikit@latest init
npx antuikit@latest add steps

## Import

import { Steps } from "@/components/ui/steps";

## Demos

- [Basic](https://ui.antuikit.com/embed/steps/basic.md): Pass `items` and `current` to show progress through a sequence.
- [Color](https://ui.antuikit.com/embed/steps/color.md): Set `color="primary"` to paint the active and finished steps in the primary color instead of the neutral default.
- [Variant](https://ui.antuikit.com/embed/steps/variant.md): Set `variant="outlined"` to draw the step circles and dots as rings instead of filled shapes.
- [Size](https://ui.antuikit.com/embed/steps/size.md): Set `size="small"` for smaller circles and tighter type in dense layouts.
- [Vertical](https://ui.antuikit.com/embed/steps/vertical.md): Set `orientation="vertical"` to stack the steps in a column, with each step's content under its title, with numbers, `type="dot"` or `type="inline"`.
- [Dot](https://ui.antuikit.com/embed/steps/dot.md): Set `type="dot"` to replace the numbered circles with small dots.
- [Navigation](https://ui.antuikit.com/embed/steps/nav.md): Set `type="navigation"` with `onChange` for tab-like steps the user can jump between, and `disabled` on a step they cannot reach yet.
- [Panel](https://ui.antuikit.com/embed/steps/panel.md): Set `type="panel"` to give each step its own panel, like the stages of an onboarding flow, filled or with `variant="outlined"`.
- [Inline](https://ui.antuikit.com/embed/steps/inline.md): Set `type="inline"` for a compact row of dots, with each step's `content` shown in a tooltip on hover.
- [Inline offset](https://ui.antuikit.com/embed/steps/inline-offset.md): Set `offset` on an inline row that shows only the later steps, so its dots line up under the full pipeline above it.
- [Custom icons](https://ui.antuikit.com/embed/steps/icons.md): Give an item its own `icon` to replace the number in its circle, like an upload glyph or a spinner on the step in progress.
- [Error status](https://ui.antuikit.com/embed/steps/error-status.md): Set `status="error"` on `Steps` to mark the current step as failed, with a red circle and a cross.
- [Status per item](https://ui.antuikit.com/embed/steps/item-status.md): Set `status` on one item to fail a step that is not the current one, like a validation that broke before publishing.
- [Percent](https://ui.antuikit.com/embed/steps/percent.md): Pass `percent` to draw a progress ring around the current step, for a step whose progress you can measure, like an upload.
- [Title placement](https://ui.antuikit.com/embed/steps/title-placement.md): Set `titlePlacement="vertical"` to put each title under its circle, which leaves more room for longer titles on a horizontal rail.
- [Clickable](https://ui.antuikit.com/embed/steps/clickable.md): Pass `onChange` to make each step clickable, sharing one `current` state with the Previous and Next buttons.
- [Max count](https://ui.antuikit.com/embed/steps/max-count.md): Set `maxCount` to collapse a long run of steps into an ellipsis around the current one, so only a few stay visible at once.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/steps`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Steps` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.