The Flip Card: Info + Login component is a versatile and interactive card that combines branding, guidance, and authentication in a single UI element. The front side can display a rich set of information—titles, descriptions, feature highlights, tips, and icons—allowing users to quickly understand the app’s value before logging in. The back side hosts a fully configurable login form with multiple fields and custom actions, while the success state provides immediate positive feedback upon login. With props for customizing content, fields, buttons, and illustrations, this component adapts to a wide range of use cases, maintaining a clean and modern design without relying on dark colors or excessive animations.
import FlipCard, { FlipCardField } from "@/components/ui/flip-card"
import { FaSmile, FaUserCheck, FaStar, FaShieldAlt } from "react-icons/fa"
export default function DemoFlipCard() {
const handleLogin = async (data: Record<string, string>) => {
console.log("Login attempt:", data)
await new Promise((r) => setTimeout(r, 1000)) // simulate delay
return data.email === "demo@example.com" && data.password === "1234"
}
const fields: FlipCardField[] = [
{ name: "email", type: "email", label: "Email Address", placeholder: "you@example.com" },
{ name: "password", type: "password", label: "Password", placeholder: "••••••••" },
{ name: "otp", type: "text", label: "OTP", placeholder: "123456" },
]
const frontInfo = (
<div className="mt-4 space-y-3 text-sm text-gray-700">
<p>🚀 Fast onboarding to get started quickly.</p>
<p>🔒 Secure login with 2FA support.</p>
<p>⭐ Personalized dashboard and insights.</p>
<div className="flex gap-3 justify-center mt-2">
<FaStar className="text-yellow-400" />
<FaShieldAlt className="text-blue-500" />
<FaSmile className="text-green-400" />
</div>
</div>
)
return (
<div className="flex items-center justify-center">
<FlipCard
frontTitle="Hello! Welcome to MyApp"
frontDescription="Click below to login"
frontContent={frontInfo} // <-- new rich content
frontIllustration={<FaSmile className="text-4xl text-yellow-400 mb-3" />}
backTitle="Please Login"
backDescription="Fill all fields to continue"
fields={fields}
onLogin={handleLogin}
successTitle="Welcome In 🎉"
successDescription="You are successfully logged in!"
successIllustration={<FaUserCheck className="text-4xl text-green-400 mb-3" />}
loginButtonText="Submit"
backButtonText="Go Back"
successButtonText="Continue"
cardWidth={380}
cardHeight={480}
/>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.