Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
Personal Info
Professional
Website Goals
Design
Budget
Requirements
Tell us about yourself
Let's start with some basic information
Step 1 of 6: Personal Info
import OnboardingForm from "@/registry/sase/onboarding-form";
export function OnboardingFormDemo() {
return <OnboardingForm />;
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/onboarding-form.json
Usage
import OnboardingForm from "@/components/ui/onboarding-form";<OnboardingForm />Features
- Multi-step wizard: 6-step form flow with progress indicator
- Smooth animations: Built with Framer Motion for engaging transitions
- Form validation: Step-by-step validation before proceeding
- Responsive design: Mobile-friendly layout
- Interactive progress: Clickable progress dots to navigate between completed steps
- Toast notifications: Success feedback using Sonner
Form Steps
- Personal Info: Name, email, and company
- Professional Background: Profession and industry selection
- Website Goals: Primary goals and target audience
- Design Preferences: Style preferences and inspirations
- Budget & Timeline: Budget range and project timeline
- Requirements: Feature selection and additional notes
Customization
The component can be customized by modifying the steps array and form fields to match your specific onboarding requirements. Update the form validation logic in the isStepValid() function to enforce custom validation rules for each step.