This is a Stepper component that displays a series of steps. It handles the state change and navigation between steps internally and can be controlled by the user. It is designed in such a way that it can used in many different contexts. It is responsive and has a data-state attribute that can be used to show the current state of the step.
You need to login to you account
IncompleteCompleteActiveAdd your wallet to your account
IncompleteCompleteActiveVerify the plan you want to subscribe
IncompleteCompleteActiveMake the purchase using multiple payment methods
IncompleteCompleteActive| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The steps to be displayed within the stepper. |
| className | string | - | Additional classes to apply for custom styling. |
| currentStep | number | - | The currently active step, allowing control over the stepper's progress. |
| onChange | (step: number) => void | - | A callback function that is triggered when the step changes. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the step. |
| className | string | - | Additional classes to apply for custom styling. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the internal step component. |
| className | string | - | Additional classes to apply for custom styling. |
| currentActiveStep | number | - | The index of the currently active step. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
The Check component renders an SVG check mark icon, used to indicate a completed step.
This stepper component is more like a stepper in form of a progress bar. It is used to indicate the current step of a process. It is responsive and has a data-state attribute that can be used to show the current state of the step. It will improve the user experience of the process as it will show the user which step they are on.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The steps to be displayed within the stepper. |
| className | string | - | Additional classes to apply for custom styling. |
| currentStep | number | - | The currently active step, allowing control over the stepper's progress. |
| onChange | (step: number) => void | - | A callback function that is triggered when the step changes. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the step. |
| className | string | - | Additional classes to apply for custom styling. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the internal step component. |
| className | string | - | Additional classes to apply for custom styling. |
| currentActiveStep | number | - | The index of the currently active step. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
The Check component renders an SVG check mark icon, used to indicate a completed step.
This is a vertical stepper component that displays a series of steps. It handles the state change and navigation between steps internally and can be controlled by the user. It is designed in such a way that it can used in many different contexts. It is responsive and has a data-state attribute that can be used to show the current state of the step.
You need to login to you account
IncompleteCompleteActiveAdd your wallet to your account
IncompleteCompleteActiveVerify the plan you want to subscribe
IncompleteCompleteActiveMake the purchase using multiple payment methods
IncompleteCompleteActive| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The steps to be displayed within the stepper. |
| className | string | - | Additional classes to apply for custom styling. |
| currentStep | number | - | The currently active step, allowing control over the stepper's progress. |
| onChange | (step: number) => void | - | A callback function that is triggered when the step changes. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the step. |
| className | string | - | Additional classes to apply for custom styling. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the internal step component. |
| className | string | - | Additional classes to apply for custom styling. |
| currentActiveStep | number | - | The index of the currently active step. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
The Check component renders an SVG check mark icon, used to indicate a completed step.
This stepper component has the same features as above but with a different design. It is used to indicate the current step of a process. It is responsive and has a data-state attribute that can be used to show the current state of the step. It will improve the user experience of the process as it will show the user which step they are on.
You need to login to you account
IncompleteCompleteActiveAdd your wallet to your account
IncompleteCompleteActiveVerify the plan you want to subscribe
IncompleteCompleteActiveMake the purchase using multiple payment methods
IncompleteCompleteActive| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The steps to be displayed within the stepper. |
| className | string | - | Additional classes to apply for custom styling. |
| currentStep | number | - | The currently active step, allowing control over the stepper's progress. |
| onChange | (step: number) => void | - | A callback function that is triggered when the step changes. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the step. |
| className | string | - | Additional classes to apply for custom styling. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the internal step component. |
| className | string | - | Additional classes to apply for custom styling. |
| currentActiveStep | number | - | The index of the currently active step. |
| step | number | - | The index of the current step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply for custom styling. |
| step | number | - | The index of the current step. |
| state | "active" | "complete" | "incomplete" | - | The state of the step, determining its appearance and behavior. |
The Check component renders an SVG check mark icon, used to indicate a completed step.
This component provides a simple implementation of a stepper with a progress meter and navigation buttons to move between steps. It is designed to guide users through a series of steps. It uses a Progress Bar to visually represent progress.
This is a combination of the stepper and meter components. It is an example to show how to integrate both together to create a more complex but user-friendly UI.
You need to login to you account
IncompleteCompleteActiveAdd your wallet to your account
IncompleteCompleteActiveVerify the plan you want to subscribe
IncompleteCompleteActiveMake the purchase using multiple payment methods
IncompleteCompleteActive| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The step components to render within the stepper. |
| className | string | - | Additional CSS classes to apply to the stepper container. |
| onChange | (step: number) => void | - | Callback function called when the active step changes. |
| currentStep | number | - | The index of the current active step. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes to apply to the step line. |
| step | number | - | The index of the step. |
| totalSteps | number | - | The total number of steps. |
| state | "active" | "complete" | "incomplete" | - | The current state of the step. Can be "active", "complete", or "incomplete". |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to render within the step. |
| className | string | - | Additional CSS classes to apply to the step. |
| Name | Type | Default | Description |
|---|---|---|---|
| currentActiveStep | number | - | The index of the current active step in the stepper. |
| step | number | - | The index of the step. |
| totalSteps | number | - | The total number of steps in the stepper. |
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes to apply to the circular step indicator. |
| step | number | - | The index of the step. |
| state | "active" | "complete" | "incomplete" | - | The current state of the step. Can be "active", "complete", or "incomplete". |