Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.
npm install headless-stepperProduction ready React hook to create awesome stepper components. Effortless to use, easy to customize.
- Headless.
- 100% TypeScript.
- No dependencies.
- 100% customizable.
Install the headless-stepper library using your favorite package manager:
``bash`
npm install headless-stepperor using yarn
yarn add headless-stepperor using pnpm
pnpm install headless-stepper
The headless-stepper library provide two ways to build your stepper component:
- Using the Stepper and Step components. See the documentation for more details.useStepper
- Using the hook. See the documentation for more details.
To use the Stepper and Step components, you need to import the Stepper and Step components from the headless-stepper library.
`tsx
import { Stepper, Step } from 'headless-stepper/components';
const MyAwesomeStepper = () => {
return (
);
};
export default MyAwesomeStepper;
`
Under the hood, the Stepper component will use the useStepper hook to manage the state of the stepper. You can use the useStepper hook to build your own stepper component.
`tsx
import React from 'react';
import { useStepper } from 'headless-stepper';
export interface HeadlessStepperProps {}
export function HeadlessStepper(props: HeadlessStepperProps) {
const steps = React.useMemo(
() => [
{
label: 'Step 1',
},
{ label: 'Step 2' },
{ label: 'Step 3' },
{ label: 'Step 4', disabled: true },
{ label: 'Step 5' },
{ label: 'Step 6' },
],
[]
);
const { state, nextStep, prevStep, progressProps, stepsProps } = useStepper({
steps,
});
return (
Current step: {state.currentStep}
export default HeadlessStepper;
`
You can find more examples on documentation.
This project was started with Nx to manage the monorepo. To learn more about Nx, read the Nx documentation.
The headless-stepper library and the documentation is under _packages_ folder. If you're running on local, execute the following command to start the development server:
`bash`
npm run dev
The Storybook will be available on the localhost:4400 and refresh when you change the useStepper code.
Run nx test headless-stepper` to execute the unit tests via Vitest.

MIT @ Raí Siqueira.