Tailwind CSS Step - Nira UI

Nira UI Step component is designed to visually represent a series of steps in a process or workflow.

Default Step

A simple horizontal step indicator to show sequential steps.

1. 1

   Register

2. 2

   Choose plan

3. 3

   Purchase

4. 4

   Receive Item

	

		
1
		
Register
	
	

		
2
		
Choose plan
	
	

		
3
		
Purchase
	
    	

		
4
		
Receive Item
	

Vertical Orientation

Display steps vertically for better readability in long workflows.

1. 1

   Register

2. 2

   Choose plan

3. 3

   Purchase

4. 4

   Receive Item

	

		
1
		
Register
	
	

		
2
		
Choose plan
	
	

		
3
		
Purchase
	
    	

		
4
		
Receive Item
	

Steps with Active States

Highlight current and completed steps using step-active and step-done classes.

1. 1

   Register

2. 2

   Choose Plan

3. 3

   Purchase

 

	

		
1
		
Register
	
	

		
2
		
Choose Plan
	
	

		
3
		
Purchase
	

Colors Variants

Use different colors to visually distinguish steps

1. 1

   Register

2. 2

   Choose Plan

3. 3

   Purchase

1. 1

   Register

2. 2

   Choose Plan

3. 3

   Purchase

1. 1

   Register

2. 2

   Choose Plan

3. 3

   Purchase

1. 1

   Register

2. 2

   In progress

3. 3

   Purchase

 

		

			
1
			
Register
		
		

			
2
			
Choose Plan
		
		

			
3
			
Purchase
		
	


		

			
1
			
Register
		
		

			
2
			
Choose Plan
		
		

			
3
			
Purchase
		
	

     

		

			
1
			
Register
		
		

			
2
			
Choose Plan
		
		

			
3
			
Purchase
		
	

    

		

			
1
			
Register
		
		

			
2
			
In progress
		
		

			
3
			
Purchase
		
	

With Icon

Step with icons.

1. 😕

   Register

2. 😃

   Choose plan

3. 😍

   Purchase

	

		
😕
		
Register
	
	

		
😃
		
Choose plan
	
	

		
😍
		
Purchase
	

Scrollable

Step can be scrollable if you have alot of steps.

1. 😕

   Done

2. 😃

   In progress

3. 😍

   Waiting

4. 😍

   Waiting

5. 😍

   Waiting

6. 😍

   Waiting

	

		
😕
		
Done
	
	

		
😃
		
In progress
	
	

		
😍
		
Waiting
	
	

		
😍
		
Waiting
	
	

		
😍
		
Waiting
	
	

		
😍
		
Waiting