Components
Onboard Card
Onboard Card
Animated onboarding card with four progressive steps, loaders, checkmarks, and smooth transitions guiding user setup.
Creating Your Account
Setting Up Your Profile
Personalizing Your Preferences
Accessing Your Dashboard
Swift Onboarding
Quickly set up your account, personalize your space, and begin exploring all features with ease.
Installation
1
Install the packages
npm i gsap @gsap/react react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
onboard-card.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cardTitle | string | Swift Onboarding | Title displayed at the top of the onboarding card. |
| cardDescription | string | Quickly set up your account, personalize your space, and begin exploring all features with ease. | Short description providing context for the onboarding process. |
| step1 | string | Creating Your Account | Label for the first onboarding step. |
| step2 | string | Setting Up Your Profile | Label for the second onboarding step. |
| step3 | string | Personalizing Your Preferences | Label for the third onboarding step. |
| step4 | string | Accessing Your Dashboard | Label for the fourth onboarding step. |