{"id":18705,"library":"rc-steps","title":"rc-steps","description":"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.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/steps","tags":["javascript","react","react-component","react-steps","typescript"],"install":[{"cmd":"npm install rc-steps","lang":"bash","label":"npm"},{"cmd":"yarn add rc-steps","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-steps","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for rendering steps component","package":"react","optional":false},{"reason":"peer dependency required for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Steps is a default export; named import will fail.","wrong":"import { Steps } from 'rc-steps'","symbol":"Steps","correct":"import Steps from 'rc-steps'"},{"note":"Step is a static property of Steps, not a separate export. Access via Steps.Step.","wrong":"import { Step } from 'rc-steps'","symbol":"Step","correct":"import Steps from 'rc-steps'; const { Step } = Steps"},{"note":"Step is not a named export; use Steps.Step or destructure from Steps.","wrong":"import Steps, { Step } from 'rc-steps'","symbol":"Steps.Step","correct":"import Steps from 'rc-steps'; <Steps.Step />"}],"quickstart":{"code":"import Steps from 'rc-steps';\nimport 'rc-steps/assets/index.css';\n\nfunction App() {\n  return (\n    <Steps current={1} status=\"process\" direction=\"horizontal\">\n      <Steps.Step title=\"Step 1\" description=\"This is step one\" />\n      <Steps.Step title=\"Step 2\" subTitle=\"In Progress\" />\n      <Steps.Step title=\"Step 3\" />\n    </Steps>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Basic usage of Steps with current step, status, direction, and three Step items including title, description, and subTitle."},"warnings":[{"fix":"Use `import Steps from 'rc-steps'` instead of `import { Steps } from 'rc-steps'`.","message":"Steps default export changed from named to default in v6.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"If overriding styles, update any custom classname logic to use clsx.","message":"classnames dependency replaced with clsx in recent versions.","severity":"deprecated","affected_versions":">=1.2.2"},{"fix":"Use `import Steps from 'rc-steps'` and then `<Steps.Step ... />`.","message":"Step is not exported as a named export; must use Steps.Step.","severity":"gotcha","affected_versions":"all"},{"fix":"Add `import 'rc-steps/assets/index.css';` to your entry file.","message":"Steps component requires importing CSS file for default styling.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use default import: `import Steps from 'rc-steps'`.","cause":"Using named import `import { Steps } from 'rc-steps'` in ESM environment.","error":"Attempted import error: 'Steps' is not exported from 'rc-steps'."},{"fix":"Access Step via Steps.Step: `import Steps from 'rc-steps'; <Steps.Step>`.","cause":"Trying to import Step as a named export.","error":"'Step' is not exported from 'rc-steps'."},{"fix":"Add `import 'rc-steps/assets/index.css';` to your entry file.","cause":"Missing CSS import for default styles.","error":"Module not found: Can't resolve 'rc-steps/assets/index.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}