Onboarding Blocks based on shadcn/ui
Multi-step onboarding form with a stepper, profile fields, workspace setup, and review step. Includes a checklist sidebar and completion state.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOnboarding Stepper
Collect profile details and configure the workspace.
Profile
Company info
Workspace
Team setup
Finish
Review
Company profile
Tell us about your organization.
Setup checklist
Complete these items to launch faster.
import OnboardingStepperForm from "@/components/creative-tim/blocks/onboarding-stepper-form"
export default function Page() {
return <OnboardingStepperForm />
}
Simple welcome card with heart icon, welcoming title, descriptive text, and Skip/Start action buttons. Perfect for onboarding flows, welcome screens, and getting started experiences.
Welcome to our community!
Let's get you started on an amazing journey
Complete your profile
Add your details to personalize your experience
Explore features
Discover all the tools and resources available
Connect with others
Join a vibrant community of like-minded people
import OnboardingWelcomeBlock from "@/components/creative-tim/blocks/onboarding-welcome-block"
export default function Page() {
return <OnboardingWelcomeBlock />
}
Comprehensive multi-step onboarding with visual stepper (Account, Profile, Confirmation), form inputs, radio options, verification code inputs, and testimonial sidebar with background image. Perfect for user registration flows, account setup wizards, and guided onboarding experiences.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROAccount
Profile
Confirmation
Nice to meet you!
"Knowledge is either from direct experience or from verifiable, falsifiable science. There is knowledge that is transmitted but not verifiable / falsifiable. They're slowed down by their perception of themselves."
John Down
CEO @ Coinbaseimport UserOnboarding from "@/components/creative-tim/blocks/user-onboarding"
export default function Page() {
return <UserOnboarding />
}