Insurance Policy Card

Buttons 82

About

Insurance Policy Card Description: A visually polished card to display key insurance policy details for a client. It includes sections for client info, policy data, a QR code, and an action button. It's designed to be easily reused with different data via props.

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

Code

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

Usage.tsx

// demo.tsx

import React from 'react';
import { InsurancePolicyCard } from '@/components/ui/insurance-policy-card';

const InsurancePolicyCardDemo = () => {
  // Sample data to pass into the component
  const sampleClient = {
    name: 'Jeremy Allen White',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/32/32e37319ab6c22cb58c5521232a281ccf2bc8597571d91e1bbc28c254bde159d.jpg',
    dateOfBirth: '09 Jan 1992',
    cityOfResidence: 'Los Angeles, CA',
  };

  const samplePolicy = {
    idNumber: '756872004',
    policyNumber: 'NPX 47208716',
    insuranceType: 'Car Insurance',
    vehicleInfo: 'Bentley Bentayga, 2019',
    expiryDate: '21 Sep 2025',
    expiryDuration: '2 years',
  };

  const handleUpdate = () => {
    // In a real app, this would trigger a modal or navigation
    alert('"Update a Policy" button clicked!');
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <InsurancePolicyCard
        client={sampleClient}
        policy={samplePolicy}
        qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=policy-NPX47208716"
        onUpdatePolicy={handleUpdate}
      />
    </div>
  );
};

export default InsurancePolicyCardDemo;