QRCode is installed into your project as a file you own. It takes the same props as Ant Design's QRCode, with nothing added or removed.
The kit changes one default: its own statusRender, so the expired state's refresh button uses the reload icon from your icon pack, and the overlays use the kit's Spin and Button. That row is marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add qr-code
The first command sets up your project once, with AntuikitProvider and the theme tokens. The second adds QRCode.
Import
Import from @/components/ui/qr-code, not from antd. The file lives in your project, so the path is a project path.
import { QRCode } from "@/components/ui/qr-code"
The axes
The props that take a fixed set of values.
type takes canvas (the default) or svg. A canvas downloads as a PNG through toDataURL(). An svg prints sharp at any size, and is the only type where color can be a CSS variable.
errorLevel takes L, M (the default), Q or H, from about 7% of the code recoverable up to about 30%. Raise it whenever you set icon, since the center image covers part of the code. Only icon with L warns in development.
status takes active, expired, loading or scanned. You set it yourself: usually expired on a timer, then back through loading in onRefresh. Every status except active covers the code with the cover part.
Flags
One, and it does more than its name says.
bordered is on by default and sets the border, the corner radius and the padding around the code. bordered={false} removes all three, and that padding is the only quiet zone the code gets, since marginSize defaults to 0. Only turn it off on a surface that leaves space around the code.
Slots
One render prop. icon is not a slot: it is an image URL drawn in the center of the code, unrelated to the icon pack.
statusRender receives { status, locale, onRefresh } and replaces all three overlays (expired, loading, scanned), not only the one you want to change.
locale arrives already translated, so use it instead of writing the text in English. To only restyle the overlay, use classNames.cover.
The refresh button only appears when onRefresh is set. Without it, the expired overlay shows the text alone.
Events
onRefresh
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key stays stable across versions.
1
<QRCode
2
classNames={{
3
root: "…",
4
cover: "…",
5
}}
6
/>
A utility class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so change the token in your theme or style the part instead.
API Reference
QRCode
QRCode's props. Rows marked antuikit in the Version column are added by the kit.