# antuikit / QRCode

> QRCode, with the expired state's refresh button drawn from the kit's icon pack.

Docs: https://antuikit.com/docs/components/qrcode

## Install

npx antuikit@latest init
npx antuikit@latest add qr-code

## Import

import { QRCode } from "@/components/ui/qr-code";

## Demos

- [Basic](https://ui.antuikit.com/embed/qr-code/basic.md): Pass `value` the text or URL to encode, and the code draws itself at the default size with a light frame around it.
- [Without border](https://ui.antuikit.com/embed/qr-code/borderless.md): Set `bordered={false}` to drop the frame, for a code that sits on a card or panel that already has its own.
- [Size](https://ui.antuikit.com/embed/qr-code/custom-size.md): Set `size` to scale the code, and `iconSize` to scale the logo in its center along with it.
- [Colors](https://ui.antuikit.com/embed/qr-code/custom-color.md): Set `color` for the modules and `bgColor` for the background, with `type="svg"` when either is a CSS variable.
- [Error level](https://ui.antuikit.com/embed/qr-code/error-level.md): Raise `errorLevel` from `L` to `H` so the code survives more damage, which it needs once an `icon` covers its center.
- [Status](https://ui.antuikit.com/embed/qr-code/status.md): Set `status` to `loading`, `scanned` or `expired` to cover the code with an overlay, and `onRefresh` to offer a refresh.
- [Expiry cycle](https://ui.antuikit.com/embed/qr-code/expiry-cycle.md): Drive `status` yourself: set `expired` when the code times out, then go through `loading` back to `active` in `onRefresh`.
- [Custom status overlay](https://ui.antuikit.com/embed/qr-code/custom-status-render.md): Pass `statusRender` to draw the overlay for every status yourself, using the `locale` text it receives.
- [Download as image](https://ui.antuikit.com/embed/qr-code/render-type-download.md): Set `type` to `canvas` or `svg`, then read the rendered element to download the code as a PNG or an SVG file.
- [Two-factor setup](https://ui.antuikit.com/embed/qr-code/two-factor-setup.md): A two-factor setup card with a code to scan, a setup key to copy, and a six-digit field that confirms it.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/qr-code`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `QRCode` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.