Steps - Keep React

The Steps Component is a user interface element used to guide users through a multi-step process or workflow. It presents a visual representation of the various stages or steps a user needs to complete in sequential order.

Table of Contents#

Default Steps
Steps Number Point
Steps With Icon
Steps Point API Reference

Default Steps#

The Default Steps configuration showcases the basic setup of the Steps Component within the UI.

Personal Information
Enter your personal details to create an account.
Verify Email
Check email for a verification link to confirm your account.
Setup Profile
Complete your profile by adding a profile picture and bio.

Steps Number Point#

You can display numbers as step indicators by passing them as children to the <StepsPoint> component.

1
Personal Information
Enter your personal details to create an account.
2
Verify Email
Check email for a verification link to confirm your account.
3
Setup Profile
Complete your profile by adding a profile picture and bio.

Steps With Icon#

To use icons as step indicators, pass the desired icon as children to the <StepsPoint> component.

Personal Information
Enter your personal details to create an account.
Verify Email
Check email for a verification link to confirm your account.
Setup Profile
Complete your profile by adding a profile picture and bio.

Steps Point API Reference#

Below are the available props for the <StepsPoint> component:

Property	Description	Type	Default
isComplete	Indicates if the step is completed.	boolean	false
className	The className of the step point.	string	None
rootClassName	The className of the step container.	string	None
lineClassName	The className of the step line.	string	None

Edit this page Switch