Onboarding / Welcome Screen

Heroes 481

About

Onboarding / Welcome Screen used to greet new users and introduce the app’s purpose. It features a hero image for visual appeal, a clear welcome title, a short description highlighting the app’s value, and two calls-to-action — a primary button (“Let’s get started”) for new users and a secondary link (“Login Now”) for returning users. It’s ideal for first-time app launches to drive sign-ups or logins.

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

Code

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

Usage.tsx

import { WelcomeScreen } from '@/components/ui/onboarding-welcome-screen';

const WelcomeScreenDemo = () => {
  // Handlers for button clicks
  const handleGetStarted = () => {
    alert('Get Started button clicked!');
  };

  const handleLogin = () => {
    alert('Login link clicked!');
  };

  return (
    <div className="relative mx-auto my-12 h-[812px] w-[975px] max-w-sm overflow-hidden rounded-3xl border shadow-lg">
      <WelcomeScreen
        imageUrl="https://cdn.21st.dev/assets/mirror/40/40f15003fc3dd37a91023fe2649e7a0602bc689f6cfc68c08b52fb37077c6c93.jpg"
        title={
          <>
            Welcome To <span className="text-primary">Doorin</span>
          </>
        }
        description="Discover and book hotels effortlessly with Doorin, your personalized hotel booking app."
        buttonText="Let's get started"
        onButtonClick={handleGetStarted}
        secondaryActionText={
          <>
            Already have an account? <span className="font-semibold text-primary">Login Now</span>
          </>
        }
        onSecondaryActionClick={handleLogin}
      />
    </div>
  );
};

export default WelcomeScreenDemo;