A QR code that dissolves into sand, pours into a scan badge and grows back.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/qr-badge
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { QrScanBadge } from "@/components/nextui/qr-badge";45export function DownloadApp() {6return (7<QrScanBadge8label="Get the app"9ariaLabel="QR code for the mobile app download page"10onClick={() => window.open("https://example.com/app")}11/>12);13}
| Prop | Type | Default | Description |
|---|---|---|---|
| matrix | string[] | QR code for nextui.dev | QR modules as rows of "1" and "0"; 25x25 fits the stage |
| label | ReactNode | "Scan me" | Text inside the badge |
| ariaLabel | string | "QR code for nextui.dev that dissolves into a scan badge and grows back" | Accessible description of the animation |
| onClick | () => void | – | Called when the badge is clicked |
| className | string | – | Extra classes on the stage |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.