rc-steps

library6.0.1jsnpmunverified

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.

web-framework

npm install rc-steps

github ↗package ↗

INSTALL

IMPORT

SIG · RC-STEPS

rc-steps

web-frameworkjavascriptv6.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Steps

✓ import Steps from 'rc-steps'

✗ import { Steps } from 'rc-steps'

Steps is a default export; named import will fail.

Step

✓ import Steps from 'rc-steps'; const { Step } = Steps

✗ import { Step } from 'rc-steps'

Step is a static property of Steps, not a separate export. Access via Steps.Step.

Steps.Step

✓ import Steps from 'rc-steps'; <Steps.Step />

✗ import Steps, { Step } from 'rc-steps'

Step is not a named export; use Steps.Step or destructure from Steps.

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;

Debug

Known issues

breakingSteps default export changed from named to default in v6.

fix

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

affects: >=6.0.0

deprecatedclassnames dependency replaced with clsx in recent versions.

fix

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

affects: >=1.2.2

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

fix

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

affects: all

gotchaSteps component requires importing CSS file for default styling.

fix

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

affects: all

Errors

Common errors & fixes

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

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

fix

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

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

Trying to import Step as a named export.

fix

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

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

Missing CSS import for default styles.

fix

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

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

reactrequiredpeer dependency required for rendering steps component

react-domrequiredpeer dependency required for DOM rendering

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/steps ↗

packagehttps://www.npmjs.com/package/rc-steps ↗