QR Code

Encodes links and structured payloads as responsive, accessible SVG with scan-safe defaults.

@rivetui/qr-code

Preview

Explore each composition interactively, then open its code in the same context.

Encode links, Wi-Fi credentials, passkey handoffs, or any other string payload.

Note

size, foreground, and background are presentation controls. Keep strong contrast and always provide an accessible label.

Destination / Documentation

Scan to open the component registry on another device.

Place a small brand mark in the center when the destination needs stronger visual identity.

Note

Adding a logo automatically uses high error correction and clears the modules behind the image.

High correction

Adding a logo automatically uses level H and clears the modules behind the mark.

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/qr-code

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.