Insurance Card

Buttons 189

About

Insurance Card A modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Insurance Card to your project and fits it to your theme.

Code

How Insurance Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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://cdn.21st.dev/assets/mirror/b3/b394d0bce8cb630d69db7db48fbf56760ecca8c1129e6364d797c75886320dfa.jpg",
    qrCodeSrc: "https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png",
  };

  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;