Loading...
Installation
Usage
import SuccessLoginCard from "@/components/ruixen/success-login-card";
export default function App() {
const fields = [
{
id: "email",
label: "Email",
type: "email",
placeholder: "you@example.com",
},
{
id: "password",
label: "Password",
type: "password",
placeholder: "********",
},
];
const handleChange = (id: string, value: string) => {
console.log(`Field ${id}:`, value);
};
const handleSubmit = async () => {
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 2000));
return true; // Return true for success
};
return (
<SuccessLoginCard
title="Sign In"
description="Enter your details to continue"
fields={fields}
onChange={handleChange}
onSubmit={handleSubmit}
animationType="checkmark"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Sign In" | Card title |
description | string | "Enter your details..." | Card description |
fields | Field[] | - | Form fields configuration |
onChange | (id: string, value: string) => void | - | Field change handler |
onSubmit | () => Promise<boolean> | - | Form submit handler |
successMessage | string | "Login Successful!" | Success state message |
animationType | "checkmark" | "color-shift" | "none" | "checkmark" | Success animation type |
Features
- Multiple Animation Types: Checkmark, color-shift, or none
- Form Validation: Built-in field validation
- Loading States: Shows processing during submission
- Success Animation: Animated checkmark or color transition
- Smooth Transitions: Framer Motion powered animations
- Responsive Design: Adapts to different screen sizes
Animation Types
Checkmark
Displays an animated SVG checkmark on success:
<SuccessLoginCard animationType="checkmark" />Color Shift
Changes background color to green on success:
<SuccessLoginCard animationType="color-shift" />None
No special animation, just text change:
<SuccessLoginCard animationType="none" />Field Type
interface Field {
id: string;
label: string;
type: string;
placeholder?: string;
}