QR Code
DisplayMITTheme-aware QR code generator with adjustable size, error-correction level, and optional center logo.
bun add @otfdashkit/ui
Preview
QR CodeDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { QrCode } from '@otfdashkit/ui'
export function Example() {
return (
<QrCode value="https://otf-kit.dev" />
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the QrCode source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | string | The text or URL to encode. Required — empty string renders an empty state. | |
| bgColor | string | 'transparent' | Background color. Default `transparent`. |
| fgColor | string | 'currentColor' | Foreground color. Default `currentColor` so it inherits the text token. |
| imageSettings | { src: string; height: number; width: number; excavate: boolean; x?: number; y?: number; opacity?: number; … } | Optional center logo / image. | |
| includeMargin | boolean | false | Add quiet-zone margin around the QR (recommended for printing). |
| level | 'L' | 'M' | 'Q' | 'H' | 'M' | Error correction level. Higher = more redundancy + bigger QR. |
| size | number | 192 | Pixel size of the rendered QR. Default 192. |