Components
Loading preview...
This is a dynamic, themed onboarding checklist component that visually breaks down setup stages with animated progress indicators, completion badges, and a customizable action button. It supports detailed theming, staged animations via framer-motion, and responsive layout variants for compact or expanded views. Perfect for onboarding flows, setup wizards, user education dashboards, or milestone-driven tasks where visual clarity and motivation matter.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/onboarding-stages"use client";
import { OnboardingStages } from "@/components/ui/onboarding-stages";
import { useState } from "react";
export default function Page() {
const [selectedTheme, setSelectedTheme] = useState<'blue' | 'purple' | 'green' | 'orange'>('blue');
const [selectedVariant, setSelectedVariant] = useState<'compact' | 'default' | 'expanded'>('default');
const handleButtonClick = () => {
console.log("Let's go button clicked!");
};
return (
<div className="min-h-screen w-full bg-gradient-to-br from-slate-50 to-slate-100 p-4">
<div className="max-w-6xl mx-auto">
{/* Controls */}
<div className="flex flex-wrap gap-4 justify-center mt-10 mb-8">
<div className="flex gap-2">
<span className="text-sm font-medium text-gray-700 self-center">Theme:</span>
{['blue', 'purple', 'green', 'orange'].map((theme) => (
<button
key={theme}
onClick={() => setSelectedTheme(theme as any)}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedTheme === theme
? 'bg-blue-500 text-white'
: 'bg-white text-gray-700 hover:bg-gray-50'
}`}
>
{theme.charAt(0).toUpperCase() + theme.slice(1)}
</button>
))}
</div>
<div className="flex gap-2">
<span className="text-sm font-medium text-gray-700 self-center">Size:</span>
{['compact', 'default', 'expanded'].map((variant) => (
<button
key={variant}
onClick={() => setSelectedVariant(variant as any)}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedVariant === variant
? 'bg-blue-500 text-white'
: 'bg-white text-gray-700 hover:bg-gray-50'
}`}
>
{variant.charAt(0).toUpperCase() + variant.slice(1)}
</button>
))}
</div>
</div>
{/* Main Component */}
<div className="flex items-center justify-center">
<OnboardingStages
onButtonClick={handleButtonClick}
className="max-w-md w-full"
theme={selectedTheme}
variant={selectedVariant}
title="ONBOARDING"
percentage={65}
buttonText="Continue Setup"
animationDuration={2000}
staggerDelay={0.15}
rounded="xl"
showPercentage={true}
enableAnimations={true}
/>
</div>
</div>
</div>
);
}