The PolicyPassCard is a modern, Shadcn UI–styled component designed to provide a clear, concise, and interactive summary of an insurance policy. It elegantly combines essential policy details, client information, and a scannable QR code for quick verification or access. The card is highly configurable, allowing developers to customize client data, policy specifics, QR code URL, and actions such as updating or viewing the policy. Built with accessibility and responsiveness in mind, it features smooth animations, tooltips for actionable elements like copyable policy numbers, and an organized layout for easy readability. This component is perfect for dashboards, customer portals, or mobile applications where users need quick access to policy information in a visually appealing, professional format.
"use client"
import React from "react"
import { PolicyPassCard } from "@/components/ui/policy-pass-card"
const PolicyPassCardDemo = () => {
const handleCopy = () => {
alert("Policy number copied!")
}
const handleRenew = () => {
alert("Redirecting to renewal page...")
}
return (
<div className="flex min-h-screen items-center justify-center bg-background p-6">
<PolicyPassCard
holderName="Sophia Carter"
policyNumber="POL-48201937"
policyType="Comprehensive Car Insurance"
vehicleName="BMW X5, 2021"
validTill="30 Nov 2025"
qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=POL-48201937"
onCopyPolicy={handleCopy}
onRenew={handleRenew}
/>
</div>
)
}
export default PolicyPassCardDemo