Components
Loading preview...
Onboarding Card A visually engaging, animated card component for user onboarding flows. It includes fields for profile picture upload and username entry, designed to be easily integrated into any welcome or setup screen.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/onboardingimport * as React from "react";
import { OnboardingCard } from "@/components/ui/onboarding";
/**
* A demo component to showcase the OnboardingCard.
*/
export default function OnboardingCardDemo() {
const [displayName, setDisplayName] = React.useState("");
const [isLoading, setIsLoading] = React.useState(false);
// Handler for the display name input change
const handleDisplayNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Basic validation: allow only alphanumeric characters and underscores
const validUsername = e.target.value.replace(/[^a-zA-Z0-9_]/g, "");
setDisplayName(validUsername);
};
// Placeholder function for upload button click
const handleUploadClick = () => {
alert("Upload button clicked!");
};
// Placeholder function for continue button click
const handleContinueClick = () => {
if (!displayName) {
alert("Please enter a display name.");
return;
}
setIsLoading(true);
console.log("Continuing with display name:", displayName);
// Simulate an API call
setTimeout(() => {
setIsLoading(false);
alert(`Welcome, ${displayName}!`);
}, 2000);
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<OnboardingCard
heroImageSrc="https://plus.unsplash.com/premium_photo-1695716578059-36842e9c045d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHBlYWNvY2slMjBmZWF0aGVyfGVufDB8fDB8fHww?q=80&w=2864&auto=format&fit=crop"
title="Welcome to Genesis"
subtitle="Your first journey here!"
displayName={displayName}
onDisplayNameChange={handleDisplayNameChange}
onUploadClick={handleUploadClick}
onContinueClick={handleContinueClick}
isLoading={isLoading}
/>
</div>
);
}