Digital vaccine record passport and clinical immunization history: SMART Health Card verifiable credential with cryptographic signature, active protection summary chips, detailed CDC/WHO vaccine administration table with CVX codes and lot tracking, and travel health advisory alerts.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/immunization-history.json$npx shadcn@latest add https://uipkge.dev/r/react/immunization-history.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/immunization-history.json$bunx shadcn@latest add https://uipkge.dev/r/react/immunization-history.jsonnpx shadcn@latest add @uipkge-react/immunization-historyInstalls to:components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
id | string | — | required |
vaccineName | string | — | required |
formulation | string | — | required |
cvxCode | string | — | required |
ndcCode | string | — | optional |
doseSequence | string | — | required |
doseBadgeVariant | 'default' | 'secondary' | 'outline' | — | required |
administeredDate | string | — | required |
manufacturer | string | — | required |
lotNumber | string | — | required |
facility | string | — | required |
provider | string | — | required |
nextDueDate | string | — | required |
statusType | 'valid' | 'permanent' | 'booster-due' | — | required |
statusLabel | string | — | required |
Type aliases exported from this item's source. Use these to shape the data you pass in.
VaccineRecordinterface VaccineRecord {
id: string
vaccineName: string
formulation: string
cvxCode: string
ndcCode?: string
doseSequence: string
doseBadgeVariant: 'default' | 'secondary' | 'outline'
administeredDate: string
manufacturer: string
lotNumber: string
facility: string
provider: string
nextDueDate: string
statusType: 'valid' | 'permanent' | 'booster-due'
statusLabel: string
}ProtectionSummaryinterface ProtectionSummary {
disease: string
status: string
doseLabel: string
lastAdministered: string
badgeVariant: 'success' | 'secondary' | 'outline'
badgeText: string
}'use client'
import type { HTMLAttributes } from 'react'
import {
AlertCircle,
Building2,
Calendar,
Check,
CheckCircle2,
Download,
ExternalLink,
FileCheck,
Globe,
Lock,
Plane,
QrCode,
ShieldCheck,
Syringe,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
export interface ImmunizationHistoryProps extends HTMLAttributes<HTMLDivElement> {}
interface VaccineRecord {
id: string
vaccineName: string
formulation: string
cvxCode: string
ndcCode?: string
doseSequence: string
doseBadgeVariant: 'default' | 'secondary' | 'outline'
administeredDate: string
manufacturer: string
lotNumber: string
facility: string
provider: string
nextDueDate: string
statusType: 'valid' | 'permanent' | 'booster-due'
statusLabel: string
}
interface ProtectionSummary {
disease: string
status: string
doseLabel: string
lastAdministered: string
badgeVariant: 'success' | 'secondary' | 'outline'
badgeText: string
}
const patientProfile = {
name: 'Elena Rostova',
dob: '1994-06-12',
age: 32,
gender: 'Female',
mrn: 'IMM-9406-821',
jurisdiction: 'State of California (CAIR2 Registry)',
complianceStatus: 'Fully Immunized · Meets School & Travel Mandates',
shcIssuer: 'California Department of Public Health (CDPH)',
shcKeyId: 'CDPH-SMART-2025-V3',
shcSignature: 'ECDSA P-256 (SHA-256)',
jwsFragment: 'shc:/5676290952432060346029243740436037704054664037593670346029243740436037704054664037593670',
}
const protectionSummaries: ProtectionSummary[] = [
{
disease: 'COVID-19',
status: 'Active Protection',
doseLabel: 'Updated Booster (2025/2026)',
lastAdministered: 'Oct 12, 2025',
badgeVariant: 'success',
badgeText: 'Verified Active',
},
{
disease: 'Influenza',
status: 'Seasonal Protection',
doseLabel: 'Quadrivalent (2025/2026)',
lastAdministered: 'Sep 28, 2025',
badgeVariant: 'success',
badgeText: 'Valid thru Sep 2026',
},
{
disease: 'Tdap',
status: 'Active (10-Yr Cycle)',
doseLabel: 'Tetanus, Diphtheria, Pertussis',
lastAdministered: 'Jun 14, 2022',
badgeVariant: 'secondary',
badgeText: 'Valid thru 2032',
},
{
disease: 'MMR',
status: 'Immune Protection',
doseLabel: 'Complete 2-Dose Series',
lastAdministered: 'Aug 22, 2010',
badgeVariant: 'success',
badgeText: 'Lifelong Immunity',
},
]
const vaccineRecords: VaccineRecord[] = [
{
id: 'rec-1',
vaccineName: 'COVID-19 mRNA (Pfizer-BioNTech Bivalent)',
formulation: 'Spikevike mRNA bivalent lineage booster',
cvxCode: 'CVX 229',
ndcCode: 'NDC 59267-1000-02',
doseSequence: 'Dose 3 of 3',
doseBadgeVariant: 'outline',
administeredDate: 'Oct 12, 2025',
manufacturer: 'Pfizer-BioNTech',
lotNumber: '#EW0182',
facility: 'UCLA Health Urgent Care',
provider: 'Nurse J. Adams, RN',
nextDueDate: 'October 2026',
statusType: 'valid',
statusLabel: 'Annual Booster Due 2026',
},
{
id: 'rec-2',
vaccineName: 'Influenza Quadrivalent',
formulation: 'Inactivated influenza split virion',
cvxCode: 'CVX 158',
ndcCode: 'NDC 49281-0422-50',
doseSequence: 'Annual Booster',
doseBadgeVariant: 'outline',
administeredDate: 'Sep 28, 2025',
manufacturer: 'Sanofi Pasteur',
lotNumber: '#FL8842',
facility: 'CVS MinuteClinic #4921',
provider: 'Pharmacist R. Patel, PharmD',
nextDueDate: 'September 2026',
statusType: 'valid',
statusLabel: 'Valid 2025/2026 Season',
},
{
id: 'rec-3',
vaccineName: 'Tdap (Tetanus, Diphtheria, Pertussis)',
formulation: 'Adsorbed acellular toxoid formulation',
cvxCode: 'CVX 115',
ndcCode: 'NDC 58160-0842-11',
doseSequence: 'Booster (10-Yr)',
doseBadgeVariant: 'outline',
administeredDate: 'Jun 14, 2022',
manufacturer: 'GlaxoSmithKline',
lotNumber: '#TD9021',
facility: 'Cedars-Sinai Primary Care',
provider: 'Dr. S. Miller, MD',
nextDueDate: 'June 2032',
statusType: 'valid',
statusLabel: 'Valid thru 2032',
},
{
id: 'rec-4',
vaccineName: 'Hepatitis B (Recombinant)',
formulation: 'Recombinant HBsAg protein subunit',
cvxCode: 'CVX 43',
ndcCode: 'NDC 00006-4995-00',
doseSequence: 'Dose 3 of 3',
doseBadgeVariant: 'outline',
administeredDate: 'Jan 18, 2018',
manufacturer: 'Merck & Co.',
lotNumber: '#HB4419',
facility: 'Kaiser Permanente Sunset',
provider: 'Nurse K. Chen, RN',
nextDueDate: 'Lifelong Immunity',
statusType: 'permanent',
statusLabel: 'Lifelong Immunity',
},
{
id: 'rec-5',
vaccineName: 'MMR (Measles, Mumps, Rubella)',
formulation: 'Live attenuated viral vaccine',
cvxCode: 'CVX 03',
ndcCode: 'NDC 00006-4681-00',
doseSequence: 'Dose 2 of 2',
doseBadgeVariant: 'outline',
administeredDate: 'Aug 22, 2010',
manufacturer: 'Merck & Co.',
lotNumber: '#MR1083',
facility: "Stanford Children's Health",
provider: 'Dr. L. Gomez, MD',
nextDueDate: 'Lifelong Immunity',
statusType: 'permanent',
statusLabel: 'Lifelong Immunity',
},
]
export function ImmunizationHistory({ className, ...props }: ImmunizationHistoryProps) {
return (
<div data-slot="immunization-history" className={cn('w-full space-y-6', className)} {...props}>
{/* Header Section */}
<header className="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div className="space-y-1.5">
<div className="flex flex-wrap items-center gap-2.5">
<h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
Immunization Record & Vaccine Passport
</h1>
<Badge wrap variant="success" className="gap-1.5 px-2.5 py-1 text-xs font-semibold">
<span className="bg-success size-1.5 rounded-full" aria-hidden="true" />
{patientProfile.complianceStatus}
</Badge>
</div>
<div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:text-sm">
<span className="text-foreground font-semibold">{patientProfile.name}</span>
<span>
DOB: <strong className="text-foreground font-medium tabular-nums">{patientProfile.dob}</strong> (
{patientProfile.age} yrs · {patientProfile.gender})
</span>
<span className="font-mono text-xs">MRN: {patientProfile.mrn}</span>
<span className="text-muted-foreground text-xs">{patientProfile.jurisdiction}</span>
</div>
</div>
{/* Action Buttons */}
<div className="flex flex-wrap items-center gap-2.5">
<Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium">
<QrCode className="size-3.5 shrink-0" aria-hidden="true" />
Share QR Pass
</Button>
<Button aria-label="Download attachment" size="sm" className="gap-1.5 text-xs font-medium">
<Download className="size-3.5 shrink-0" aria-hidden="true" />
Download Official Record PDF
</Button>
</div>
</div>
</header>
{/* Digital Health Pass Card: Verifiable SMART® Health Card */}
<Card className="border-border/90 relative overflow-hidden shadow-xs">
{/* Security Watermark Background Motif */}
<div
className="pointer-events-none absolute -top-10 -right-10 size-72 opacity-[0.03] select-none dark:opacity-[0.05]"
aria-hidden="true"
>
<ShieldCheck className="text-foreground size-full" />
</div>
<CardHeader className="border-border/60 bg-muted/20 border-b pb-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
<div className="border-success/30 bg-success/10 text-success text-success flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs">
<ShieldCheck className="size-5" aria-hidden="true" />
</div>
<div>
<div className="flex min-w-0 items-center gap-2">
<CardTitle className="text-base font-semibold">SMART® Health Card Verified</CardTitle>
<Badge wrap variant="outline" className="font-mono text-xs">
W3C Credential
</Badge>
</div>
<CardDescription className="text-xs">
Issuer: {patientProfile.shcIssuer} · Signed via {patientProfile.shcKeyId}
</CardDescription>
</div>
</div>
<div className="flex min-w-0 flex-wrap items-center gap-2">
<Badge wrap variant="outline" className="gap-1 px-2 py-0.5 font-mono text-xs">
<Lock className="text-success size-3" aria-hidden="true" />
<span>{patientProfile.shcSignature}</span>
</Badge>
<Badge wrap variant="success" className="gap-1 text-xs">
<Check className="size-3" aria-hidden="true" />
Cryptographically Signed
</Badge>
</div>
</div>
</CardHeader>
<CardContent className="p-5 sm:p-6">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-center">
{/* QR Code & Digital Signature Verification Container */}
<div className="bg-muted/40 border-border/70 min-w-0 rounded-xl border p-4 sm:p-5 lg:col-span-5">
<div className="flex flex-col items-center gap-4 sm:flex-row">
{/* Crisp SVG QR Code Placeholder */}
<div className="bg-background ring-border/80 relative flex size-36 shrink-0 items-center justify-center rounded-lg p-2.5 shadow-2xs ring-1">
<svg
viewBox="0 0 120 120"
className="text-foreground size-full"
fill="currentColor"
shapeRendering="crispEdges"
aria-label="SMART Health Card Digital QR Pass"
role="img"
>
{/* Finder Pattern: Top-Left */}
<rect x="6" y="6" width="30" height="30" rx="3" />
<rect x="11" y="11" width="20" height="20" rx="2" className="fill-background" />
<rect x="15" y="15" width="12" height="12" rx="1.5" />
{/* Finder Pattern: Top-Right */}
<rect x="84" y="6" width="30" height="30" rx="3" />
<rect x="89" y="11" width="20" height="20" rx="2" className="fill-background" />
<rect x="93" y="15" width="12" height="12" rx="1.5" />
{/* Finder Pattern: Bottom-Left */}
<rect x="6" y="84" width="30" height="30" rx="3" />
<rect x="11" y="89" width="20" height="20" rx="2" className="fill-background" />
<rect x="15" y="93" width="12" height="12" rx="1.5" />
{/* Timing Patterns */}
<rect x="42" y="18" width="5" height="5" />
<rect x="52" y="18" width="5" height="5" />
<rect x="62" y="18" width="5" height="5" />
<rect x="72" y="18" width="5" height="5" />
<rect x="18" y="42" width="5" height="5" />
<rect x="18" y="52" width="5" height="5" />
<rect x="18" y="62" width="5" height="5" />
<rect x="18" y="72" width="5" height="5" />
{/* Alignment Pattern: Bottom-Right */}
<rect x="86" y="86" width="20" height="20" rx="2" />
<rect x="90" y="90" width="12" height="12" rx="1" className="fill-background" />
<rect x="93" y="93" width="6" height="6" />
{/* Data Modules Matrix Grid */}
<rect x="42" y="32" width="5" height="5" />
<rect x="50" y="32" width="5" height="5" />
<rect x="68" y="32" width="5" height="5" />
<rect x="76" y="32" width="5" height="5" />
<rect x="42" y="42" width="5" height="5" />
<rect x="58" y="42" width="5" height="5" />
<rect x="68" y="42" width="5" height="5" />
<rect x="92" y="42" width="5" height="5" />
<rect x="100" y="42" width="5" height="5" />
<rect x="32" y="52" width="5" height="5" />
<rect x="48" y="52" width="5" height="5" />
<rect x="58" y="52" width="5" height="5" />
<rect x="78" y="52" width="5" height="5" />
<rect x="88" y="52" width="5" height="5" />
<rect x="32" y="62" width="5" height="5" />
<rect x="42" y="62" width="5" height="5" />
<rect x="62" y="62" width="5" height="5" />
<rect x="72" y="62" width="5" height="5" />
<rect x="102" y="62" width="5" height="5" />
<rect x="48" y="72" width="5" height="5" />
<rect x="58" y="72" width="5" height="5" />
<rect x="82" y="72" width="5" height="5" />
<rect x="42" y="82" width="5" height="5" />
<rect x="52" y="82" width="5" height="5" />
<rect x="62" y="82" width="5" height="5" />
<rect x="72" y="82" width="5" height="5" />
<rect x="52" y="92" width="5" height="5" />
<rect x="68" y="92" width="5" height="5" />
<rect x="42" y="102" width="5" height="5" />
<rect x="60" y="102" width="5" height="5" />
<rect x="74" y="102" width="5" height="5" />
</svg>
</div>
{/* Pass Metadata */}
<div className="w-full min-w-0 space-y-2 text-center sm:text-left">
<div>
<h2 className="text-foreground text-sm font-semibold">Offline Verifiable Pass</h2>
<p className="text-muted-foreground text-xs">
Compatible with Apple Health, Google Wallet, and international border checkpoint verifiers.
</p>
</div>
<div className="border-border/60 bg-background/80 rounded border p-2">
<span className="text-muted-foreground block text-xs font-medium">JWS Payload Digest</span>
<code className="text-muted-foreground block truncate font-mono text-xs">
{patientProfile.jwsFragment}
</code>
</div>
<div className="text-muted-foreground flex items-center justify-center gap-1 text-xs sm:justify-start">
<CheckCircle2 className="text-success size-3.5" aria-hidden="true" />
<span>Public Key Confirmed Active</span>
</div>
</div>
</div>
</div>
{/* Vaccine Summary Protection Chips */}
<div className="space-y-3 lg:col-span-7">
<div className="flex items-center justify-between">
<h2 className="text-foreground text-sm font-semibold">Active Health Protections & Key Immunizations</h2>
<span className="text-muted-foreground text-xs font-medium">4 Core Mandates Met</span>
</div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
{protectionSummaries.map((chip) => (
<div
key={chip.disease}
className="bg-card border-border/80 hover:border-border flex flex-col justify-between rounded-lg border p-3.5 shadow-2xs transition-colors"
>
<div className="flex items-start justify-between gap-2">
<div className="flex min-w-0 items-center gap-2">
<div className="border-success/20 bg-success/10 text-success flex size-7 shrink-0 items-center justify-center rounded-md border">
<Syringe className="size-3.5" aria-hidden="true" />
</div>
<div>
<span className="text-foreground text-sm font-semibold">{chip.disease}</span>
<p className="text-muted-foreground truncate text-xs">{chip.doseLabel}</p>
</div>
</div>
<Badge wrap variant={chip.badgeVariant} className="text-xs font-medium">
{chip.badgeText}
</Badge>
</div>
<div className="border-border/60 text-muted-foreground mt-3 flex items-center justify-between border-t pt-2 text-xs">
<span>
Last:{' '}
<strong className="text-foreground font-medium tabular-nums">{chip.lastAdministered}</strong>
</span>
<span className="text-success font-medium">{chip.status}</span>
</div>
</div>
))}
</div>
</div>
</div>
</CardContent>
</Card>
{/* Immunization Records Table */}
<Card className="shadow-xs">
<CardHeader>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div>
<CardTitle className="text-base font-semibold">Administered Immunization History</CardTitle>
<CardDescription className="text-xs sm:text-sm">
Complete chronological registry of vaccine administrations, CDC CVX codes, lot verification, and
clinical facilities.
</CardDescription>
</div>
<div className="flex min-w-0 items-center gap-2">
<Badge wrap variant="outline" className="gap-1 text-xs tabular-nums">
<FileCheck className="text-primary size-3.5" aria-hidden="true" />
<span>5 Records Verified</span>
</Badge>
</div>
</div>
</CardHeader>
<CardContent className="p-0">
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[28%] min-w-[220px]">Vaccine & CVX Code</TableHead>
<TableHead className="min-w-[130px]">Dose Sequence</TableHead>
<TableHead className="min-w-[120px]">Administered Date</TableHead>
<TableHead className="min-w-[160px]">Manufacturer & Lot #</TableHead>
<TableHead className="min-w-[220px]">Administering Facility & Provider</TableHead>
<TableHead className="min-w-[140px] text-right">Status / Next Due</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{vaccineRecords.map((record) => (
<TableRow key={record.id}>
<TableCell>
<div className="text-foreground text-sm font-semibold">{record.vaccineName}</div>
<div className="text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs">
<span className="font-mono">{record.cvxCode}</span>
{record.ndcCode && <span className="text-muted-foreground/60">·</span>}
{record.ndcCode && <span className="font-mono text-xs">{record.ndcCode}</span>}
</div>
</TableCell>
<TableCell>
<Badge wrap variant={record.doseBadgeVariant} className="text-xs font-medium">
{record.doseSequence}
</Badge>
</TableCell>
<TableCell>
<div className="flex items-center gap-1.5">
<Calendar className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
<span className="text-foreground text-sm font-medium tabular-nums">
{record.administeredDate}
</span>
</div>
</TableCell>
<TableCell>
<div className="text-foreground text-sm font-medium">{record.manufacturer}</div>
<div className="text-muted-foreground font-mono text-xs">{record.lotNumber}</div>
</TableCell>
<TableCell>
<div className="text-foreground flex items-center gap-1.5 text-sm font-medium">
<Building2 className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
<span>{record.facility}</span>
</div>
<div className="text-muted-foreground text-xs">{record.provider}</div>
</TableCell>
<TableCell className="text-right">
<Badge
wrap
variant={record.statusType === 'permanent' ? 'success' : 'secondary'}
className="text-xs font-medium"
>
{record.nextDueDate}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
{/* Upcoming Due Vaccines & Travel Advisory Alert Card */}
<Card className="border-warning/30 bg-warning/[0.04] bg-warning/[0.07] shadow-xs">
<CardContent className="p-5 sm:p-6">
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div className="flex items-start gap-3.5">
<div className="border-warning/30 bg-warning/10 text-warning text-warning flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs">
<Globe className="size-5" aria-hidden="true" />
</div>
<div className="space-y-3">
<div>
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-foreground text-base font-semibold">
Upcoming Recommendations & Travel Health Advisory
</h2>
<Badge wrap variant="warning" className="gap-1 text-xs font-medium">
<AlertCircle className="size-3" aria-hidden="true" />
CDC Notice · Level 2
</Badge>
</div>
<p className="text-muted-foreground mt-1 text-xs sm:text-sm">
Clinical recommendations based on patient age cohort, seasonal guidelines, and destination health
advisories.
</p>
</div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
{/* Travel Alert Item 1: Yellow Fever */}
<div className="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-1.5">
<Plane className="text-warning size-3.5" aria-hidden="true" />
<span className="text-foreground text-xs font-semibold">Yellow Fever Vaccine (Live 17D)</span>
</div>
<Badge wrap variant="outline" className="border-warning/30 text-warning text-xs">
Travel Advisory
</Badge>
</div>
<p className="text-muted-foreground mt-1.5 text-xs">
Recommended for upcoming travel to endemic regions in South America (Brazil, Peru, Colombia).
Single dose provides lifelong immunity; administer ≥10 days prior to departure.
</p>
<div className="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs">
<span>
Priority: <strong className="text-foreground font-medium">High for South America</strong>
</span>
<span className="text-warning font-medium">Pending Rx</span>
</div>
</div>
{/* Advisory Item 2: Meningococcal MenACWY */}
<div className="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-1.5">
<Syringe className="text-primary size-3.5" aria-hidden="true" />
<span className="text-foreground text-xs font-semibold">Meningococcal Conjugate (MenACWY)</span>
</div>
<Badge wrap variant="outline" className="text-xs">
Routine Booster
</Badge>
</div>
<p className="text-muted-foreground mt-1.5 text-xs">
Recommended 5-year booster for international academic programs, dormitory residency, and
congregate international travel settings.
</p>
<div className="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs">
<span>
Next Window:{' '}
<strong className="text-foreground font-medium tabular-nums">Jan – Mar 2027</strong>
</span>
<span className="text-muted-foreground font-medium">Due in 11 mos</span>
</div>
</div>
</div>
</div>
</div>
{/* Advisory Action Buttons */}
<div className="flex shrink-0 flex-wrap items-center gap-2 lg:flex-col lg:items-end">
<Button size="sm" className="gap-1.5 text-xs font-medium">
<Calendar className="size-3.5" aria-hidden="true" />
Schedule Travel Clinic Visit
</Button>
<Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium">
<ExternalLink className="size-3.5" aria-hidden="true" />
View CDC Destination Guidelines
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
Raw manifest:https://uipkge.dev/r/react/immunization-history.json
