All components
QR Code
Scannable code frames with a centered logo overlay, sized from 2xs to 2xl.
Sizes
2xs
xs
sm
md
lg
xl
2xl
Install
zsh — qr-code
1bunx stylexblocks add qr-codeUsage — Ark UI
qr-code.tsx
1234567891011121314151617import { QrCode } from "#components/ui/ark-ui/qr-code.tsx";
export function Example() { return ( // the real Ark QrCode machine wearing the recipe styles — it encodes // the value into a scannable matrix and positions the logo overlay; // modules fill with currentColor <QrCode.Root defaultValue="https://stylexblocks.com" size="md"> <QrCode.Frame> <QrCode.Pattern /> </QrCode.Frame> <QrCode.Overlay> <Logo /> </QrCode.Overlay> </QrCode.Root> );}