QR Code
Generate QR code patterns from any string value. Supports custom sizes and colors.
Sizes
Three sizes: sm (128px), md (200px), lg (280px).
Sizes
Custom Colors
Override foreground and background colors.
Colors
Different Values
Each unique value produces a different pattern.
Values
Usage
Import and use the QRCode component.
tsx
import { QRCode } from "@/components/ui/QRCode";
<QRCode value="https://omnira.space" size="lg" />
// Custom colors
<QRCode value="..." color="var(--color-lime)" bgColor="#0f172a" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The data to encode (required). |
| size | "sm" | "md" | "lg" | "md" | QR code size. |
| color | string | — | Foreground color (CSS value). |
| bgColor | string | — | Background color (CSS value). |