Loading...
Installation
Usage
import FlipCard from "@/components/ruixen/flip-card";
export default function App() {
const handleLogin = async (data: Record<string, string>) => {
console.log("Login data:", data);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
return true; // Return true for success, false for failure
};
return (
<FlipCard
frontTitle="Welcome Back 👋"
frontDescription="Login to continue"
backTitle="Login Form"
fields={[
{
name: "email",
type: "email",
label: "Email",
placeholder: "Enter your email",
},
{
name: "password",
type: "password",
label: "Password",
placeholder: "Enter your password",
},
]}
onLogin={handleLogin}
cardWidth={320}
cardHeight={420}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
frontTitle | string | "Welcome Back 👋" | Title on front of card |
frontDescription | string | "Login to continue" | Description on front |
backTitle | string | "Login Form" | Title on back of card |
successTitle | string | "Login Successful 🎉" | Title when login succeeds |
fields | FlipCardField[] | Default email/password fields | Form fields configuration |
onLogin | (data: Record<string, string>) => Promise<boolean> | - | Login handler function |
cardWidth | number | 320 | Width of the card |
cardHeight | number | 420 | Height of the card |
showBackInitially | boolean | false | Start with form side visible |
Features
- 3D Flip Animation: Smooth card flip transition
- Three States: Front welcome, back form, success confirmation
- Customizable Fields: Configure form inputs
- Async Login: Support for API calls with loading states
- Error Handling: Display login errors
- Success Animation: Celebration state after login
- Responsive Design: Adapts to different screen sizes
Field Type
export interface FlipCardField {
name: string;
type?: string;
label: string;
placeholder?: string;
}States
- Front: Welcome message with login button
- Back: Form with input fields
- Success: Confirmation message after successful login