QR code

A scannable QR code rendered as SVG.

import { BuiQrCode } from 'ng-blatui';

<bui-qr-code value="https://ngblatui.remix-it.com" [size]="180" />

Styled

<bui-qr-code value="…" [size]="180" foreground="#4f46e5" background="#eef2ff" [margin]="2" />

Prop	Type	Default	Description
`value`	`string`	`''`	Text or URL to encode into the QR code.
`size`	`number`	`160`	Rendered width and height of the SVG in pixels.
`label`	`string`	`'QR code'`	Accessible label for the QR code image.
`foreground`	`string`	`'currentColor'`	Fill colour of the QR modules (dark squares).
`background`	`string`	`'transparent'`	Background fill colour behind the modules.
`margin`	`number`	`2`	Quiet-zone border width, in modules.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.