Sections

Components

Utilities

Forms

Hooks

useIsMobile

QR Code

Copy Markdown

Displays a QR code.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/qr-code

Anatomy#

QrCode
├── QrCodeFrame
├── QrCodeOverlay
└── QrCodeDownload

Usage#

import { 
  QrCode, 
  QrCodeFrame,
  QrCodeOverlay,
  QrCodeDownload,
} from "@/components/ui/qr-code";

<QrCode>
  <QrCodeFrame />
  <QrCodeOverlay />
  <QrCodeDownload />
</QrCode>

Size#

Override the size with the --qr-code-size CSS variable on QrCode

For example, --qr-code-size:6rem for small, --qr-code-size:10rem for large

PreviewCode

Examples#

With an overlay#

Use QrCodeOverlay to add an overlay in the center.

PreviewCode

Error correction#

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

Use the encoding.ecc property to set the error correction level:

L: Allows recovery of up to 7% data loss (default)
M: Allows recovery of up to 15% data loss
Q: Allows recovery of up to 25% data loss
H: Allows recovery of up to 30% data loss

PreviewCode

Download#

Use QrCodeDownload with fileName and mimeType to let users download the QR code as an image.

PreviewCode

Live Preview

PNGSVG

API Reference#

QrCode#

Root wrapper for the QR code and optional overlay/actions.

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`encoding`	`QrCodeGenerateOptions`	-
`pixelSize`	`number`	-
`className`	`string`	-
`asChild`	`boolean`	-

Attribute	Default
`--qr-code-size`	`--spacing(32)`
`--qr-code-overlay-size`	`calc(var(--qr-code-size)/4)`

QrCodeFrame#

SVG containing the QR pattern. Scales with size.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

QrCodeOverlay#

Optional center overlay on top of the QR pattern.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

QrCodeDownload#

Downloads the QR code as an image file.

Prop	Type	Default
`fileName`	`string`	-
`mimeType`	`DataUrlType`	-
`quality`	`number`	-
`className`	`string`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

[

Prose ](/docs/components/prose)[

Radio Group ](/docs/components/radio-group)

On This Page

Installation Anatomy Usage Size Examples With an overlay Error correction Download API Reference QrCode QrCodeFrame QrCodeOverlay QrCodeDownload