Onboarding Form

Forms 691

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Onboarding Form to your project and fits it to your theme.

Code

How Onboarding Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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://cdn.21st.dev/assets/mirror/34/34deb6335ecf73e9008dc9907d50b9a2874b44f2bcbe233f4aa77e24da9ab071.png"
        avatarSrc="https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg"
        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>
  );
}