Pro License
ActiveXXXX-****-****-WXYZActivations: 2/5Expires: Jan 27, 2027
Trial License
PendingDEMO-TRIAL-KEY1-2345-6789-0000Expired License
ExpiredEXPR-****-****-5678Expires: Dec 28, 2025
Overview
A secure license key display component with masking, copy-to-clipboard, and status indicators. Perfect for customer portals and license delivery pages.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/polar-license-key"Usage
import { PolarLicenseKey } from "@/components/elements/polar-license-key";
export function LicenseSection() {
return (
<PolarLicenseKey
licenseKey="XXXX-ABCD-1234-EFGH-5678-WXYZ"
productName="Pro License"
status="active"
activations={{ current: 2, limit: 5 }}
expiresAt={new Date("2025-12-31")}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
licenseKey | string | - | The license key to display |
productName | string | - | Product name label |
status | "active" | "expired" | "revoked" | "pending" | "active" | License status |
activations | { current: number; limit: number } | - | Activation count |
expiresAt | Date | string | - | Expiration date |
masked | boolean | true | Initially mask the key |
showCopyButton | boolean | true | Show copy button |
showStatus | boolean | true | Show status badge |
size | "sm" | "md" | "lg" | "md" | Component size |
onCopy | (key: string) => void | - | Copy callback |
Features
- Toggle key visibility (show/hide)
- One-click copy to clipboard
- Status badge with color coding
- Activation count display
- Expiration date formatting
- Monospace font for key display