antuikit's Steps is Ant Design's Steps, installed into your project as a file you own. It takes the same props and adds color, marked antuikit in the API table. Its default is default, which draws the active and finished steps in neutral ink, so pass color="primary" for Ant Design's look. It also has a default iconRender that draws the finish, error and ellipsis glyphs from your icon pack, and steps aside when you pass your own.
Install
npx antuikit@latest init
npx antuikit@latest add steps
The first command sets up AntuikitProvider and the theme tokens, and the second adds this component.
Import
From @/components/ui/steps, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Steps } from "@/components/ui/steps"
The axes
Steps has five enumerated props. They match the Figma properties on the Design tab.
variant takes filled (the default) or outlined.
type takes default, navigation, inline, panel or dot. It changes what other props do: percent is ignored in inline and offset works only there.
status takes wait, process (the default), finish or error, and applies to the current step only.
size takes small or medium. There is no large, and default is the deprecated name for medium.
orientation and titlePlacement each take horizontal or vertical. The v5 names, direction and labelPlacement, still work and warn in development.
There is no shape prop: the circles and dots are always round.
Flags
Two booleans. The first can override the orientation you set.
responsive defaults to true and turns a horizontal rail vertical below 576px, whatever orientation says. To keep a rail horizontal on a phone, pass responsive={false} and handle the overflow yourself.
ellipsis truncates each step's title, subtitle and content to one line instead of wrapping. It keeps the rail one row tall and hides the end of long titles, so use it with short ones.
maxCount takes a number of at least 3 and collapses the hidden steps into one disabled ellipsis step, drawn with the more glyph from your icon pack. onChange still receives the original index.
Slots
Steps takes no children. Every slot lives on an item, so the component is driven from items.
title and subTitle: the step's name and the small line beside it.
content: the text under the title. description is its deprecated name, and content wins when you pass both. In type="inline" it shows in a tooltip on the dot.
icon: replaces what is inside the circle whatever the status, including the icon pack glyphs.
iconRender is the one render prop: (oriNode, info) => ReactNode, called with the default node and info (index, active, item, components). Wrap your glyph in components.Icon so the step keeps its markup, and return oriNode for every case you do not handle.
Steps.Step is deprecated and not exported. Pass items.
Events
onChange
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, since the keys stay stable across versions.
1
<Steps
2
classNames={{
3
root: "…",
4
item: "…",
5
itemWrapper: "…",
6
itemIcon: "…",
7
itemSection: "…",
8
itemHeader: "…",
9
itemTitle: "…",
10
itemSubtitle: "…",
11
itemContent: "…",
12
itemRail: "…",
13
}}
14
/>
A Tailwind class on one of these keys overrides the default style without !important. Writing a component token's CSS variable on the root has no effect, so style the part instead, or set the token in your theme.
API Reference
Steps
Steps's props. Rows marked antuikit in the Version column are added by the kit.