https://github.com/damianricobelli/stepperize
A library for creating step-by-step workflows in your apps
https://github.com/damianricobelli/stepperize
primitive react react-native shadcn-ui stepper typesafe
Last synced: 27 days ago
JSON representation
A library for creating step-by-step workflows in your apps
- Host: GitHub
- URL: https://github.com/damianricobelli/stepperize
- Owner: damianricobelli
- Created: 2024-04-09T03:31:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-16T03:35:49.000Z (about 2 months ago)
- Last Synced: 2025-04-05T08:01:09.466Z (about 1 month ago)
- Topics: primitive, react, react-native, shadcn-ui, stepper, typesafe
- Language: TypeScript
- Homepage: https://stepperize.vercel.app
- Size: 1.51 MB
- Stars: 1,110
- Watchers: 7
- Forks: 41
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 04-25 | (Libs and Components)
README
[](https://bundlephobia.com/result?p=@stepperize/react@latest)
[](https://www.npmjs.com/package/@stepperize/react)
[](https://www.npmjs.com/package/@stepperize/react)
A library for creating step-by-step workflows in your apps
- 🚀 Fast and efficient
- 🔥 Powerful and flexible
- 📦 Lightweight
- 🪄 Fully type-safe
- 🔗 Composable architecture
- 🎨 Unstyled for maximum customization
## Installation
```bash
npm install @stepperize/react
```
## Quick Start
1. Import the constructor:
```tsx
import { defineStepper } from "@stepperize/react";
```
2. Define your steps:
```tsx
const { Scoped, useStepper, steps, utils } = defineStepper(
{ id: "step-1", title: "Step 1", description: "Description for step 1" },
{ id: "step-2", title: "Step 2", description: "Description for step 2" },
{ id: "step-3", title: "Step 3", description: "Description for step 3" },
{ id: "step-4", title: "Step 4", description: "Description for step 4" }
);
```
3. Use the hook in your components:
```tsx
function StepperComponent() {
const { currentStep, nextStep, prevStep } = useStepper();
return (
{currentStep.title}
{currentStep.description}
Previous
Next
);
}
```
## How It Works
Stepperize allows you to define a series of steps with unique IDs. When you create your steps using `defineStepper`, you get:
- A `Scoped` component for context management
- A `useStepper` hook for step control
- An array of `steps` for rendering
- An `utils` object with useful functions
The only required field for each step is the `id`. You can add any additional properties you need, and they'll be fully type-safe when using the hook.
## Documentation
For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).
## Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
## License
Stepperize is [MIT licensed](LICENSE).