react-component/steps

README

@rc-component/steps

_{Part of the Ant Design ecosystem.}

🚶 Structured React steps for progress, navigation, and multi-step workflows.

Highlights

Renders progress and navigation steps from a simple items array.
Supports horizontal and vertical layouts, inline mode, custom icons, and status control.
Provides semantic classNames and styles slots for stable theming.
Keeps keyboard-accessible step changes when onChange is provided.

Install

npm install @rc-component/steps

Usage

import Steps from '@rc-component/steps';
import '@rc-component/steps/assets/index.css';

export default () => (
  <Steps
    current={1}
    items={[
      { title: 'Create', content: 'Create an account' },
      { title: 'Verify', content: 'Verify email' },
      { title: 'Done', content: 'Start using the app' },
    ]}
  />
);

Online preview: https://steps.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Steps

Name	Type	Default	Description
`className`	string	-	Additional class name.
`classNames`	`Partial<Record<SemanticName, string>>`	-	Semantic class names for internal slots.
`components`	`{ root?: ComponentType; item?: ComponentType }`	-	Override root and item elements.
`current`	number	0	Current step index.
`iconRender`	`(originNode, info) => ReactNode`	-	Custom step icon renderer.
`initial`	number	0	Initial step index offset.
`itemRender`	`(originNode, info) => ReactNode`	-	Custom step item renderer.
`itemWrapperRender`	`(originNode) => ReactNode`	-	Custom step item wrapper renderer.
`items`	StepItem[]	[]	Step data.
`onChange`	`(current: number) => void`	-	Triggered when a clickable step changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation.
`prefixCls`	string	`'rc-steps'`	Prefix class name.
`rootClassName`	string	-	Root class name.
`status`	`'error' \| 'process' \| 'finish' \| 'wait'`	`'process'`	Current step status.
`style`	React.CSSProperties	-	Root style.
`styles`	`Partial<Record<SemanticName, React.CSSProperties>>`	-	Semantic styles for internal slots.
`titlePlacement`	`'horizontal' \| 'vertical'`	`'horizontal'`	Title placement for horizontal steps.

StepItem

Name	Type	Default	Description
`className`	string	-	Item class name.
`classNames`	`Partial<Record<ItemSemanticName, string>>`	-	Semantic class names for this item.
`content`	React.ReactNode	-	Step content.
`description`	React.ReactNode	-	Deprecated. Use `content` instead.
`disabled`	boolean	false	Disable step click behavior.
`icon`	React.ReactNode	-	Custom step icon.
`onClick`	React.MouseEventHandler	-	Item click handler.
`status`	Status	-	Item status.
`style`	React.CSSProperties	-	Item style.
`styles`	`Partial<Record<ItemSemanticName, React.CSSProperties>>`	-	Semantic styles for this item.
`subTitle`	React.ReactNode	-	Subtitle.
`title`	React.ReactNode	-	Title.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/steps is released under the MIT license.