{"id":45191230,"url":"https://github.com/aloknecessary/react-progress-stepper-ts","last_synced_at":"2026-02-23T10:24:11.664Z","repository":{"id":216123460,"uuid":"740516312","full_name":"aloknecessary/react-progress-stepper-ts","owner":"aloknecessary","description":"React Progress Stepper written in typescript","archived":false,"fork":false,"pushed_at":"2026-02-20T10:06:49.000Z","size":3640,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-20T14:08:18.821Z","etag":null,"topics":["react","react-progress-bar","react-progress-stepper","react-stepper","react-stepper-ts","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://aloknecessary.github.io/react-progress-stepper-ts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aloknecessary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-08T14:01:31.000Z","updated_at":"2026-02-20T10:06:53.000Z","dependencies_parsed_at":"2024-01-08T16:14:40.323Z","dependency_job_id":"b0313f38-1d28-4042-8334-59538760b989","html_url":"https://github.com/aloknecessary/react-progress-stepper-ts","commit_stats":null,"previous_names":["aloknecessary/react-progress-stepper-ts"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/aloknecessary/react-progress-stepper-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloknecessary%2Freact-progress-stepper-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloknecessary%2Freact-progress-stepper-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloknecessary%2Freact-progress-stepper-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloknecessary%2Freact-progress-stepper-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloknecessary","download_url":"https://codeload.github.com/aloknecessary/react-progress-stepper-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloknecessary%2Freact-progress-stepper-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","react-progress-bar","react-progress-stepper","react-stepper","react-stepper-ts","reactjs","typescript"],"created_at":"2026-02-20T12:03:36.279Z","updated_at":"2026-02-23T10:24:11.656Z","avatar_url":"https://github.com/aloknecessary.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://i.ibb.co/dKD1dYq/samir-repo.png\"\u003e\n\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact Progress Stepper\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eMinimal and beautiful stepper for React.\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://aloknecessary.github.io/react-progress-stepper-ts/\"\u003e\u003cimg src=\"https://img.shields.io/badge/LIVE DEMO-23c275?style=flat\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/Open%20Source-🤍-23c275\"\u003e\n\u003cimg src=\"https://img.shields.io/github/stars/aloknecessary/react-progress-stepper-ts?color=23c275\u0026label=Stars\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/dw/react-progress-stepper-ts?color=23c275\u0026label=Downloads\"\u003e\n\u003cimg src=\"https://img.shields.io/github/license/aloknecessary/react-progress-stepper-ts?color=23c275\u0026label=License\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"./docs/stepper.gif\" alt=\"Stepper gif\"\u003e\n\u003cimg src=\"./docs/stepper_dark.gif\" alt=\"Stepper dark gif\"\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n## ⚙️ Installation\n\n```shell\n$ npm i react-progress-stepper-ts\n$ yarn add react-progress-stepper-ts\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## ✔️ Usage\n\n```js\nimport React from 'react';\nimport {\n  Stepper,\n  Step,\n  useStepper,\n} from \"react-progress-stepper-ts\";\n\nexport default const App = () =\u003e {\n  const { step, incrementStep, decrementStep } = useStepper(0, 3);\n\n  return (\n    \u003c\u003e\n      \u003cStepper step={step}\u003e\n        \u003cStep\u003e\u003c/Step\u003e\n        \u003cStep\u003e\u003c/Step\u003e\n        \u003cStep\u003e\u003c/Step\u003e\n      \u003c/Stepper\u003e\n      \u003cbutton onClick={decrementStep}\u003ePrev\u003c/button\u003e\n      \u003cbutton onClick={incrementStep}\u003eNext\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## 🔎 Modules\n\n### 🔹 Stepper\n\n| Property   | Type    | Description                             |\n| ---------- | ------- | --------------------------------------- |\n| `step`     | Integer | State to track the current step         |\n| `vertical` | Boolean | Toggle vertical view                    |\n| `dark`     | Boolean | Toggle dark mode                        |\n| `numbered` | Boolean | Toggle if each step is numbered or not  |\n| `theme`    | Object  | Customize the appearance of the stepper |\n\n### 🔹 Step\n\n| Property        | Type     | Description                  |\n| --------------- | -------- | ---------------------------- |\n| `customContent` | Function | Override step circle content |\n\n### 🔹 Content\n\nYou can customize the content of each step, as the example below:\n\n\u003cimg src=\"./docs/stepper_content.gif\" alt=\"Stepper with content gif\"\u003e    \n  \n```js\nimport React from 'react';\nimport {\n  Stepper,\n  Step,\n  useStepper,\n  StepNumber,\n  StepTitle,\n  StepStatus,\n  StepDescription,\n} from \"react-progress-stepper-ts\";\n\nexport default const App = () =\u003e {\nconst { step, incrementStep, decrementStep } = useStepper(0, 3);\n\nreturn (\n    \u003c\u003e\n      \u003cStepper step={step}\u003e\n        \u003cStep\u003e\n          \u003cStepNumber /\u003e\n          \u003cStepTitle\u003eTitle\u003c/StepTitle\u003e\n          \u003cStepStatus /\u003e\n          \u003cStepDescription\u003eDescription\u003c/StepDescription\u003e\n        \u003c/Step\u003e\n        \u003cStep\u003e\n          \u003cStepNumber /\u003e\n          \u003cStepTitle\u003eTitle\u003c/StepTitle\u003e\n          \u003cStepStatus /\u003e\n          \u003cStepDescription\u003eDescription\u003c/StepDescription\u003e\n        \u003c/Step\u003e\n        \u003cStep\u003e\n          \u003cStepNumber /\u003e\n          \u003cStepTitle\u003eTitle\u003c/StepTitle\u003e\n          \u003cStepStatus /\u003e\n          \u003cStepDescription\u003eDescription\u003c/StepDescription\u003e\n        \u003c/Step\u003e\n      \u003c/Stepper\u003e\n    \u003c/\u003e\n  )\n}\n\n````\n\n#### StepNumber\n\n| Property | Type   | Description    |\n| -------- | ------ | -------------- |\n| `text`   | String | Customize text |\n\n#### StepTitle\nStepTitle comes with no property, you can pass text as children.\n\n#### StepStatus\n\n| Property        | Type   | Description    |\n| --------------- | ------ | -------------- |\n| `textProgress`  | String | Customize text |\n| `textCompleted` | String | Customize text |\n| `textPending`   | String | Customize text |\n\n#### StepDescription\nStepDescription comes with no property, you can pass text as children.\n\n### 🔹 useStepper\n\nHook to handle the state of stepper easily, you could write your own logic to handle the state.\n\nTo work properly you need to provide two arguments to useStepper:\n\n- **Number of current step**: starts from 0;\n- **Number of total steps**.\n\nuseStepper provides several utilities:\n\n- **step**: state to track the current step;\n- **incrementStep**: function to increment state by one;\n- **decrementStep**: function to decrement state by one;\n- **goToStep**: function to set state to a specific step number.\n\n## 🎨 Theming and Style Overrides\n\nYou can customize the appearance of the stepper in two ways:\n\n### 🔹 Using the **theme** object:  \n\n```js\n{\n  light: {\n    step: {\n      pending: {\n        background: \"#ededed\",\n        color: \"#a1a3a7\",\n      },\n      progress: {\n        background: \"#3c3fed\",\n        color: \"#ffffff\",\n      },\n      completed: {\n        background: \"#23c275\",\n        color: \"#ffffff\",\n      },\n    },\n    content: {\n      pending: {\n        stepNumber: { color: \"#a1a3a7\" },\n        title: { color: \"#a1a3a7\" },\n        status: { background: \"#f2f2f2\", color: \"#a1a3a7\" },\n        description: { color: \"#a1a3a7\" },\n      },\n      progress: {\n        stepNumber: { color: \"#131b26\" },\n        title: { color: \"#131b26\" },\n        status: { background: \"#e7e9fd\", color: \"#3c3fed\" },\n        description: { color: \"#131b26\" },\n      },\n      completed: {\n        stepNumber: { color: \"#131b26\" },\n        title: { color: \"#131b26\" },\n        status: { background: \"#e9faf2\", color: \"#23c275\" },\n        description: { color: \"#131b26\" },\n      },\n    },\n    progressBar: {\n      pending: {\n        background: \"#ededed\",\n      },\n      progress: {\n        background: \"#e7e9fd\",\n        fill: \"#3c3fed\",\n      },\n      completed: {\n        background: \"#e9faf2\",\n        fill: \"#23c275\",\n      },\n    },\n  },\n  dark: {\n    step: {\n      pending: {\n        background: \"#1a1a1a\",\n        color: \"#767676\",\n      },\n      progress: {\n        background: \"#19b6fe\",\n        color: \"#ffffff\",\n      },\n      completed: {\n        background: \"#23c275\",\n        color: \"#ffffff\",\n      },\n    },\n    content: {\n      pending: {\n        stepNumber: { color: \"#767676\" },\n        title: { color: \"#767676\" },\n        status: { background: \"#1a1a1a\", color: \"#767676\" },\n        description: { color: \"#767676\" },\n      },\n      progress: {\n        stepNumber: { color: \"#ece4d9\" },\n        title: { color: \"#ece4d9\" },\n        status: { background: \"#08374c\", color: \"#19b6fe\" },\n        description: { color: \"#ece4d9\" },\n      },\n      completed: {\n        stepNumber: { color: \"#ece4d9\" },\n        title: { color: \"#ece4d9\" },\n        status: { background: \"#0b3a23\", color: \"#23c275\" },\n        description: { color: \"#ece4d9\" },\n      },\n    },\n    progressBar: {\n      pending: {\n        background: \"#1a1a1a\",\n      },\n      progress: {\n        background: \"#08374c\",\n        fill: \"#19b6fe\",\n      },\n      completed: {\n        background: \"#0b3a23\",\n        fill: \"#23c275\",\n      },\n    },\n  },\n}\n````\n\n### 🔹 Overriding the **CSS** using class names, example:  \n\n```css\n.step {\n  width: 3em;\n  height: 3em;\n}\n\n.step.progress {\n  background: #6ab04c;\n}\n```\n\n## ✏️ License and Credits\n\n**React Progress Stepper** is released under the *MIT* license, feel free to use it, share and modify.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloknecessary%2Freact-progress-stepper-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloknecessary%2Freact-progress-stepper-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloknecessary%2Freact-progress-stepper-ts/lists"}