Components
Loading preview...
Insurance Card A modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/insurance-card// demo.tsx
import { InsuranceCard } from "@/components/ui/insurance-card";
// Main demo component to showcase the InsuranceCard
const InsuranceCardDemo = () => {
// Sample data to populate the card
const policyDetails = {
clientName: "Jeremy Allen White",
dateOfBirth: "09 Jan 1992",
cityOfResidence: "Los Angeles, CA",
idNumber: "756872004",
policyNumber: "NPX 47208716",
insuranceType: "Car Insurance",
vehicleInfo: "Bentley Bentayga, 2019",
expireDate: "21 Sep 2025",
expireDuration: "2 years",
// Replace with actual image URLs
avatarSrc: "https://plus.unsplash.com/premium_photo-1739196926899-bd9c5a765ca3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2ZpbGV8ZW58MHwyfDB8fHww&auto=format&fit=crop&q=60&w=900",
qrCodeSrc: "https://ik.imagekit.io/fpxbgsota/Untitled.png?updatedAt=1759082788907",
};
const handleUpdate = () => {
console.log("Update Policy button clicked!");
// Add logic for updating the policy here
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<InsuranceCard
{...policyDetails}
onUpdatePolicy={handleUpdate}
/>
</div>
);
};
export default InsuranceCardDemo;