Open in v0
Registry examples with Radix UI or Base UI. Switch tabs to preview and copy the code for each.
Each example is available in two variants. Use the tabs to choose Radix UI or Base UI, then open in v0 or run the shadcn add command to copy.
Stepper demo
Step 1
Step 2
Step 3
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-demo.jsonStep 1
Step 2
Step 3
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-demo.jsonStepper with description
Step 1
This is the first step
Step 2
This is the second step
Step 3
This is the third step
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-description.jsonStep 1
This is the first step
Step 2
This is the second step
Step 3
This is the third step
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-description.jsonStepper with react-hook-form
Personal Info
Enter your personal details
Contact Info
How can we reach you?
Address
Where do you live?
Complete
Review and submit
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-form.jsonPersonal Info
Enter your personal details
Contact Info
How can we reach you?
Address
Where do you live?
Complete
Review and submit
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-form.jsonStepper with icons
Cart
Review your items
Shipping
Enter shipping details
Payment
Complete payment
Confirmation
Order confirmed
Shopping Cart
Review the items in your cart before proceeding.
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-icon.jsonCart
Review your items
Shipping
Enter shipping details
Payment
Complete payment
Confirmation
Order confirmed
Shopping Cart
Review the items in your cart before proceeding.
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-icon.jsonStepper with label orientation
Account
Create your account
Profile
Set up your profile
Preferences
Configure preferences
Complete
All done!
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-label-orientation.jsonAccount
Create your account
Profile
Set up your profile
Preferences
Configure preferences
Complete
All done!
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-label-orientation.jsonStepper with scroll tracking
Introduction
Welcome to the tutorial
Basics
Learn the fundamentals
Advanced
Deep dive into advanced topics
Practice
Apply what you learned
Certification
Get your certificate
Welcome!
This tutorial will guide you through the basics and advanced concepts. Take your time to understand each section before moving on.
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-scroll-tracking.jsonIntroduction
Welcome to the tutorial
Basics
Learn the fundamentals
Advanced
Deep dive into advanced topics
Practice
Apply what you learned
Certification
Get your certificate
Welcome!
This tutorial will guide you through the basics and advanced concepts. Take your time to understand each section before moving on.
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-scroll-tracking.jsonStepper with variants
Step 1
First step description
Step 2
Second step description
Step 3
Third step description
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/radix-ui/stepper-with-variants.jsonStep 1
First step description
Step 2
Second step description
Step 3
Third step description
Content for step-1
npx shadcn add https://stepperize.vercel.app/r/base-ui/stepper-with-variants.jsonLast updated on