Import
tsx
import { QrCode } from "@indoku/ui"Examples
Basic usage
I
tsx
function QrCodeDemo() { return ( <HStack gap="4" align="start"> <QrCode.Root value="https://indoku.id" boxSize="36" /> <QrCode.Root value="https://indoku.id/u/demo" level="H" boxSize="36"> <QrCode.Frame /> <QrCode.Overlay> <Text fontWeight="bold">I</Text> </QrCode.Overlay> </QrCode.Root> </HStack> )}Props
Root
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | – | |
level | QrLevel | M | Error-correction level. Raised automatically while the data still fits (see noBoost). |
noBoost | boolean | – | Disable the automatic level upgrade. |
quietZone | number | 2 | White margin in modules (spec says 4, 2 is usually still readable). |
fill | string | near black | Dark module color. |
background | string | white | Background color. A QR code needs contrast, so it does not follow dark mode. |
label | string | QR code | aria-label of the SVG. |
children | React.ReactNode | – |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev