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 — Base UI
qr-code.tsx
1234567891011121314151617181920import { QrCode } from "#components/ui/base-ui/qr-code.tsx";
export function Example() { return ( // Base UI ships no QR machine — Frame is an <svg> (viewBox 0 0 29 29) // whose children are the module paths: feed it server-generated QR // markup to make it scannable (a decorative grid works for mockups); // modules fill with currentColor and every part composes via `render` <QrCode.Root size="md"> <QrCode.Frame aria-label="QR code"> <path fillRule="evenodd" d="M0 0h7v7H0V0Zm1 1v5h5V1H1Z" /> <path d="M2 2h3v3H2z" /> {/* …finder squares and data modules… */} </QrCode.Frame> <QrCode.Overlay> <Logo /> </QrCode.Overlay> </QrCode.Root> );}