{"id":13422306,"url":"https://github.com/jeanverster/chakra-ui-steps","last_synced_at":"2025-05-14T16:13:29.210Z","repository":{"id":39859951,"uuid":"372496835","full_name":"jeanverster/chakra-ui-steps","owner":"jeanverster","description":"Steps component designed to work seamlessly with Chakra UI","archived":false,"fork":false,"pushed_at":"2025-01-25T20:31:32.000Z","size":2218,"stargazers_count":389,"open_issues_count":21,"forks_count":46,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-13T00:39:40.576Z","etag":null,"topics":["chakra-ui","react","reactjs","steps"],"latest_commit_sha":null,"homepage":"https://chakra-ui-steps.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeanverster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-31T12:20:36.000Z","updated_at":"2025-03-02T14:07:49.000Z","dependencies_parsed_at":"2024-01-13T20:59:31.722Z","dependency_job_id":"3549f835-1c8d-40e1-a41d-8185a3022417","html_url":"https://github.com/jeanverster/chakra-ui-steps","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Fchakra-ui-steps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Fchakra-ui-steps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Fchakra-ui-steps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Fchakra-ui-steps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeanverster","download_url":"https://codeload.github.com/jeanverster/chakra-ui-steps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650414,"owners_count":21139671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","react","reactjs","steps"],"created_at":"2024-07-30T23:00:41.379Z","updated_at":"2025-04-13T00:39:45.576Z","avatar_url":"https://github.com/jeanverster.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","🛠️ Tools"],"sub_categories":[],"readme":"\u003ch1 style=\"font-weight: bold;\"\u003e\n  chakra-ui-steps\n\u003c/h1\u003e\n\n\u003cspan\u003eSteps component designed to work seamlessly with \u003ca href=\"https://chakra-ui.com/\" target=\"_blank\"\u003eChakra UI\u003c/a\u003e.\u003c/span\u003e \u003cspan\u003eAll documentation and a variety of code examples can be viewed \u003ca href=\"https://chakra-ui-steps.vercel.app\" target=\"_blank\"\u003ehere\u003c/a\u003e.\u003c/span\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n[![npm - chakra-ui-steps](https://img.shields.io/npm/v/chakra-ui-steps \"chakra-ui-steps npm\")](https://www.npmjs.com/package/chakra-ui-steps)\n[![bundle size - chakra-ui-steps](https://badgen.net/bundlephobia/min/chakra-ui-steps)](https://bundlephobia.com/result?p=chakra-ui-steps)\n[![bundle size - chakra-ui-steps](https://badgen.net/bundlephobia/minzip/chakra-ui-steps)](https://bundlephobia.com/result?p=chakra-ui-steps)\n[![Total Downloads - chakra-ui-steps](https://badgen.net/npm/dt/chakra-ui-steps?color=blue \"chakra-ui-steps npm downloads\")](https://www.npmjs.com/package/chakra-ui-steps)\n[![Weekly Downloads - chakra-ui-steps](https://badgen.net/npm/dw/chakra-ui-steps?color=blue \"chakra-ui-steps npm weekly downloads\")](https://www.npmjs.com/package/chakra-ui-steps)\n\n![screenshot](https://i.imgur.com/4NDju8N.png)\n\n## Installation\n\nYarn:\n\n```bash\nyarn add chakra-ui-steps\n```\n\nNPM:\n\n```bash\nnpm i chakra-ui-steps\n```\n\n## Usage\n\nIn order to use the `Steps` component you will need to first extend the theme with the `StepsTheme` object. This can be done in your theme file:\n\n```jsx\nimport { extendTheme } from \"@chakra-ui/react\";\nimport { StepsTheme as Steps } from \"chakra-ui-steps\";\n\nconst theme = extendTheme({\n  components: {\n    Steps,\n  },\n});\n\nexport default theme;\n```\n\nThen you can use the `Steps` component in your app:\n\n```jsx\nimport { Steps, Step } from \"chakra-ui-steps\";\n\nconst Example = () =\u003e {\n  const { nextStep, prevStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n  return (\n    \u003cdiv\u003e\n      \u003cSteps activeStep={activeStep}\u003e\n        \u003cStep label=\"Step 1\" description=\"This is the first step\" /\u003e\n        \u003cStep label=\"Step 2\" description=\"This is the second step\" /\u003e\n        \u003cStep label=\"Step 3\" description=\"This is the third step\" /\u003e\n      \u003c/Steps\u003e\n      \u003cButton onClick={() =\u003e prevStep()}\u003eBack\u003c/Button\u003e\n      \u003cButton onClick={() =\u003e nextStep()}\u003eNext\u003c/Button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Docs\n\nFor a full list of available props and examples of how to use the component, please visit the \u003ca href=\"https://chakra-ui-steps.vercel.app\" target=\"_blank\"\u003edocumentation site\u003c/a\u003e.\n\nIf you found this package useful, please consider leaving a star ⭐️ on the repo. Thanks!\n\n\u003chr /\u003e\n\n## Upgrade guide\n\nIf you are upgrading to v2 of this component you will need to make the following changes:\n\n- `StepsStyleConfig` has been renamed to `StepsTheme` - so you will need to update the reference to this in your theme config:\n\n```diff\n- import { StepsStyleConfig as Steps } from 'chakra-ui-steps';\n+ import { StepsTheme as Steps } from 'chakra-ui-steps';\n```\n\n- Previously the `Steps` component accepted a `labelOrientation` prop, this has been removed in favor of the `circles-alt` variant. If you were using this prop you will need to update your code to use the variant instead:\n\n```diff\n- \u003cSteps labelOrientation=\"vertical\" /\u003e\n+ \u003cSteps variant=\"circles-alt\" /\u003e\n```\n\nThe rest of the API remains the same.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeanverster%2Fchakra-ui-steps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeanverster%2Fchakra-ui-steps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeanverster%2Fchakra-ui-steps/lists"}