Data display

Qr code

A QR code, rendered as crisp SVG from an in-house encoder — no dependency, no canvas.

Server safeSource

Import

import { QRCode } from '@the_viveksingh/vivek-ui'

A URL, the defaults that scan

Black on white, a four-module quiet zone, level M with a free upgrade when the version has room. It is an image with a name - role="img" and an aria-label saying what it encodes - so a screen-reader user learns the URL instead of "graphic". SVG, so any size is crisp.

Rendered as SVG from an in-house encoder — no dependency, no canvas. The right one uses level H so the logo can cover a fifth of it and still scan.

<QRCode value="https://ui.vivekkumarsingh.in/docs" size={160} />

// Give it a better name than the raw URL when there is one:
<QRCode value={ticketUrl} label="Scan to open your ticket" />

Branded: a logo, round modules, a colour

image places a logo in the centre and clears the modules beneath it - use level H so the code survives the loss. moduleShape="round" and fg change the look; keep the contrast strong and the quiet zone intact, or phones stop reading it.

Rendered as SVG from an in-house encoder — no dependency, no canvas. The right one uses level H so the logo can cover a fifth of it and still scan.

<QRCode
  value="https://ui.vivekkumarsingh.in"
  level="H"
  moduleShape="round"
  fg="#1d4ed8"
  image={{ src: '/logo.png', size: 0.22 }}
  label="Scan to open the VivekUI docs"
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for QRCode
Prop	Type	Default	Description
`value`	`string`	—	The text or URL to encode. Encoded as UTF-8 in byte mode.
`level`	`QrLevel`	—	Error-correction level. Default `M` (15 % recoverable). Use `H` (30 %) when placing an `image` over the code. The level is raised for free when the chosen version has room.
`size`	`number`	—	Rendered side in CSS pixels. The SVG scales; `style={{ width: '100%' }}` also works. Default `160`.
`margin`	`number`	—	Quiet zone in modules. Scanners want 4; use less only inside a generous light frame. Default `4`.
`label`	`string`	—	Accessible name. Default `QR code: {value}`.
`moduleShape`	`'square' \| 'round'`	—	`round` draws each module as a dot. Default `square`.
`image`	`QRCodeImage`	—	A logo in the centre. Modules underneath are cleared; pair it with `level="H"`.
`fg`	`string`	—	Dark module colour. Default `#000`. Scanners want strong contrast, so the theme is not consulted.
`bg`	`string`	—	Background colour. Default `#fff`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

QRCode carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.