rc-steps

6.0.1 verified Sat Apr 25 auth: no javascript

React component library for displaying step progress indicators. Current stable version 6.0.1, released under major version 6 with TypeScript types included. Part of the react-component ecosystem by Ant Design. Supports horizontal, vertical, navigation, inline, and 'horizontal-alternate' directions. Differentiators: customizable icons, custom item renderer, multiple statuses (error, process, finish, wait), subTitle and tailContent on Step items. The package has migrated from classnames to clsx and supports semantic HTML (ol/li). Requires React >=16.9.0.

Common errors

error Attempted import error: 'Steps' is not exported from 'rc-steps'. ↓

cause Using named import `import { Steps } from 'rc-steps'` in ESM environment.

fix

Use default import: import Steps from 'rc-steps'.

error 'Step' is not exported from 'rc-steps'. ↓

cause Trying to import Step as a named export.

fix

Access Step via Steps.Step: import Steps from 'rc-steps'; <Steps.Step>.

error Module not found: Can't resolve 'rc-steps/assets/index.css' ↓

cause Missing CSS import for default styles.

fix

Add import 'rc-steps/assets/index.css'; to your entry file.

Warnings

breaking Steps default export changed from named to default in v6. ↓

fix Use `import Steps from 'rc-steps'` instead of `import { Steps } from 'rc-steps'`.

deprecated classnames dependency replaced with clsx in recent versions. ↓

fix If overriding styles, update any custom classname logic to use clsx.

gotcha Step is not exported as a named export; must use Steps.Step. ↓

fix Use `import Steps from 'rc-steps'` and then `<Steps.Step ... />`.

gotcha Steps component requires importing CSS file for default styling. ↓

fix Add `import 'rc-steps/assets/index.css';` to your entry file.

Install

npm install rc-steps

yarn add rc-steps

pnpm add rc-steps

Imports

Steps
wrong
```
import { Steps } from 'rc-steps'
```
correct
```
import Steps from 'rc-steps'
```
Steps is a default export; named import will fail.
Step
wrong
```
import { Step } from 'rc-steps'
```
correct
```
import Steps from 'rc-steps'; const { Step } = Steps
```
Step is a static property of Steps, not a separate export. Access via Steps.Step.
Steps.Step
wrong
```
import Steps, { Step } from 'rc-steps'
```
correct
```
import Steps from 'rc-steps'; <Steps.Step />
```
Step is not a named export; use Steps.Step or destructure from Steps.

Quickstart

Basic usage of Steps with current step, status, direction, and three Step items including title, description, and subTitle.

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

function App() {
  return (
    <Steps current={1} status="process" direction="horizontal">
      <Steps.Step title="Step 1" description="This is step one" />
      <Steps.Step title="Step 2" subTitle="In Progress" />
      <Steps.Step title="Step 3" />
    </Steps>
  );
}

export default App;