Gamified Login Card

Component gamified-login-card-demo not found in registry.

Installation

Usage

import GamifiedLoginCard from "@/components/ruixen/gamified-login-card";
 
export default function App() {
  const handleChange = (values: Record<string, string>) => {
    console.log("Form values:", values);
  };
 
  const handleSubmit = (values: Record<string, string>) => {
    console.log("Login attempt:", values);
    // Your authentication logic here
  };
 
  return (
    <GamifiedLoginCard
      title="Welcome Back!"
      successMessage="Login Successful! 🎉"
      inputs={[
        {
          id: "email",
          type: "email",
          label: "Email",
          placeholder: "you@example.com",
        },
        {
          id: "password",
          type: "password",
          label: "Password",
          placeholder: "********",
        },
      ]}
      buttonText="Sign In"
      confettiColors={["#facc15", "#22c55e", "#3b82f6", "#f472b6", "#f97316"]}
      confettiCount={50}
      onChange={handleChange}
      onSubmit={handleSubmit}
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`string`	`"Sign In"`	Card title
`successMessage`	`string`	`"Welcome!"`	Success state message
`inputs`	`LoginInput[]`	Email/password fields	Form input configuration
`buttonText`	`string`	`"Login"`	Submit button text
`confettiColors`	`string[]`	Default colors	Confetti particle colors
`confettiCount`	`number`	`30`	Number of confetti particles
`className`	`string`	-	Additional CSS classes
`onChange`	`(values: Record<string, string>) => void`	-	Input change handler
`onSubmit`	`(values: Record<string, string>) => void`	-	Form submit handler

Features

Confetti Celebration: Animated particles on successful login
Form Validation: Requires all fields to be filled
Customizable Inputs: Configure form fields as needed
Success Animation: Smooth transition to success state
Responsive Design: Works on all screen sizes
Gamification: Makes login feel rewarding and fun

Input Configuration

export interface LoginInput {
  id: string;
  type: string;
  label: string;
  placeholder?: string;
}

Example custom inputs:

const customInputs = [
  {
    id: "username",
    type: "text",
    label: "Username",
    placeholder: "Enter username",
  },
  {
    id: "password",
    type: "password",
    label: "Password",
    placeholder: "Enter password",
  },
  { id: "code", type: "text", label: "2FA Code", placeholder: "000000" },
];

Confetti Customization

Customize the celebration effect:

<GamifiedLoginCard
  confettiColors={["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"]}
  confettiCount={40}
/>

Use Cases

Perfect for:

Gaming Platforms: Game login screens
Educational Apps: Student portals
Reward Systems: Loyalty program logins
Interactive Websites: Engaging user experiences
Mobile Apps: Gamified authentication