Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn QR Code for React Radix UI

Displays a QR code.

Framework
UI library

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/qr-code.json

Anatomy

QrCode
├── QrCodeFrame
│   └── QrCodePattern
├── QrCodeOverlay
└── QrCodeDownload

Usage

import { QrCode, QrCodeFrame } from "@/components/ui/qr-code";
<QrCode value="https://www.x.com/vinihvc">
  <QrCodeFrame />
</QrCode>

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Download

Error Correction

Overlay

Size

API Reference

QrCode

div

PropType
AttributeType
CSS variableType
--qr-code-sizestring
--qrcode-heightstring
--qrcode-pixel-sizestring
--qrcode-widthstring

QrCodeFrame

svg

PropType
AttributeType
CSS variableType
--qr-code-sizestring

QrCodePattern

path

PropType
AttributeType
CSS variableType
--qr-code-sizestring

QrCodeOverlay

div

PropType
AttributeType
CSS variableType
--qr-code-overlay-sizestring

QrCodeDownload

button

PropType
AttributeType

useQrCode