Components / QR Code

QR Code

Handing a payload from a desktop screen to the phone in the user’s hand: phone verification (the sms: link that opens Messages prefilled), device pairing, a link that only makes sense on mobile. Always pair it with a plain button that does the same thing, for the people already on that phone.

import { QrCode } from '@layers/ui/qr-code'

Rendered stock

House rules

• The plane stays LIGHT in both themes. A QR is a scannable artifact, not chrome, and third-party scanners still miss inverted codes. The component owns this via a local --qr-paper; do not "fix" it to follow the theme.
• Geometry is drawn in --ink and the eyes differentiate by shape, never by color. The brand pastels sit at 1.5-2:1 on light surfaces, and the finder patterns are what the camera locks onto first.
• Keep the payload short. Error correction is pinned to Q and the code sizes itself to fit, so every extra character costs modules — past roughly 110 characters you drop under 3px per module at normal sizes and phone cameras stop locking on. Shorten the payload rather than enlarging the code.
• Pass label: null only when an adjacent control already carries the same action; otherwise name what scanning does, not what the image is.
• Never render the payload as text beside the code as a "fallback" — an sms: URL is unreadable to a human and reads as debug output.