@rc-component/steps

_{Part of the Ant Design ecosystem.}

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

English | 简体中文

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.