Components
Loading preview...
Onboarding Form A visually engaging, animated onboarding form with a glassmorphism effect. It includes fields for avatar upload and display name, designed for reusability in any sign-up or profile creation flow.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/onboarding-formimport { useState } from 'react';
import { OnboardingForm } from '@/components/ui/onboarding-form'; // Adjust the import path
export default function OnboardingFormDemo() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Mock function for form submission
const handleCreateAccount = (username: string) => {
console.log("Creating account for:", username);
setIsSubmitting(true);
setTimeout(() => {
setIsSubmitting(false);
alert(`Account for @${username} created successfully!`);
}, 2000); // Simulate network delay
};
// Mock function for upload button
const handleUpload = () => {
alert("Upload button clicked!");
};
return (
// A decorative container to showcase the glassmorphism effect
<div className="flex h-screen w-full items-center justify-center">
<OnboardingForm
imageSrc="https://ik.imagekit.io/fpxbgsota/Image.png?updatedAt=1760432307349q=80&w=2070&auto=format&fit=crop"
avatarSrc="https://i.pravatar.cc/150?u=a042581f4e29026704d"
avatarFallback="A"
title="Welcome, you're starting your first journey here!"
description="Add your avatar and pick a username for a quick start."
inputPlaceholder="username"
buttonText="Create an account"
onUploadClick={handleUpload}
onSubmit={handleCreateAccount}
isSubmitting={isSubmitting}
/>
</div>
);
}