The Card with Micro-Animations on Success is a polished and configurable login card built with shadcn UI components, designed to provide users with instant, professional feedback. Instead of plain static messages, this card delivers subtle success animations such as a checkmark drawing itself or a smooth background color shift, creating a sense of accomplishment without unnecessary clutter. Developers can pass in customizable props like fields, onChange, onSubmit, and even choose the animationType (checkmark, color-shift, or none) depending on the brand’s tone. By keeping the layout clean and minimal while offering meaningful micro-interactions, this component improves user trust and makes the authentication flow feel more modern and engaging, all while remaining versatile enough to adapt to different applications.
// demo/SuccessLoginDemo.tsx
"use client"
import * as React from "react"
import SuccessLoginCard from "@/components/ui/success-login-card"
export default function DemoOne() {
const [form, setForm] = React.useState<{ [key: string]: string }>({})
const handleChange = (id: string, value: string) => {
setForm((prev) => ({ ...prev, [id]: value }))
}
const handleSubmit = async () => {
console.log("Form Submitted:", form)
// Fake API delay
await new Promise((res) => setTimeout(res, 1000))
return true // simulate success
}
return (
<div className="min-h-screen flex items-center justify-center">
<SuccessLoginCard
title="Create Your Account"
description="Fill in the details below to get started"
fields={[
{ id: "name", label: "Full Name", type: "text", placeholder: "John Doe" },
{ id: "email", label: "Email", type: "email", placeholder: "you@example.com" },
{ id: "phone", label: "Phone Number", type: "tel", placeholder: "+91 98765 43210" },
{ id: "password", label: "Password", type: "password", placeholder: "********" },
{ id: "confirmPassword", label: "Confirm Password", type: "password", placeholder: "********" },
{ id: "company", label: "Company / Organization", type: "text", placeholder: "Ruixen Pvt. Ltd." },
{ id: "role", label: "Role", type: "text", placeholder: "Software Developer" },
]}
onChange={handleChange}
onSubmit={handleSubmit}
successMessage="🎉 Account Created Successfully!"
animationType="confetti"
/>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.