The QRCode component generates crisp, scannable QR codes with rounded dots and optional gradient presets.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/qr-code.json
Examples
Gradient Presets
Default
Ocean
Sunset
Forest
Berry
Twilight
Aurora
Fire
Neon
Rose
Mint
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The URL or data to encode. Required. |
size | number | 160 | Overall size of the QR code in pixels. |
fgColor | string | "var(--foreground)" | Foreground color when no gradient is applied. |
bgColor | string | "var(--background)" | Background color. Automatically adapts to dark/light mode. |
errorCorrectionLevel | "L" | "M" | "Q" | "H" | "M" | Error correction level. L (7%), M (15%), Q (25%), H (30%). |
gradient | GradientPreset | "default" | Gradient preset. Options: default, ocean, sunset, forest, berry, twilight, aurora, fire, neon, rose, mint. |
className | string | — | Additional CSS classes for the SVG element. |