Qr Code

A React QR code component with its own encoder: byte mode, versions 1 to 40, four error correction levels, crisp SVG in currentColor, a logo well and an SVG download button.

src/registry/ui/qr-code.tsx/r/qr-code.json

Installation#

bash

npx shadcn@latest add @minidev/qr-code

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/qr-code.json

Usage#

tsx

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

export function Example() {
  return <QrCode />
}

API reference#

QrCode props
Prop	Type	Default
`value`	`string`	`"https://ui.minidev.pro"`
`size`	`number`	`200`
`level`	`QrLevel`	`"M"`
`fg`	`string`	`"currentColor"`
`bg`	`string`	`"transparent"`
`margin`	`number`	`2`
`logoScale`	`number`	`0.24`
`mask`	`number`	`-`
`caption`	`string`	`-`
`download`	`boolean`	`true`
`fileName`	`string`	`"qr-code.svg"`
`bare`	`boolean`	`false`
`title`	`string`	`-`
`children`	`React.ReactNode`	`-`
`className`	`string`	`-`