Skip to content
Twentyfirst UIPro

Qr Code

Admin · QrCode, Card

View as Markdown

A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service.

  • value is the text; level sets the error correction (L, M by default, Q, H).
  • It fills its container's width, or size; the light quiet zone (quiet, default 4 modules) is part of the drawing.
  • Dark modules on the paper colour in every theme, because scanners expect dark on light.
  • TwoFactorSetup draws one from qrValue (the otpauth:// link).
Scan with an authenticator app
Join on your phone

Props

QrCode

PropTypeNotes
valuestringThe text to encode: an otpauth:// link, a URL …
level?"L" | "M" | "Q" | "H"Error correction: L, M (default), Q or H.
size?number | stringWidth and height (default: the width of its container).
quiet?numberLight modules around the code (default 4, the standard quiet zone).
label?stringAccessible name (default "QR code").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Card

PropTypeNotes
title?string
description?string
meta?string[]
corner?ReactNode
status?ReactNode
actions?ReactNode[]
tint?Tint | "surface"
onClick?() => void
children?ReactNode
eyebrow?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.