QrCode

The QrCode component generates QR codes from text, URLs, or any string data. Built on top of Ark UI with customizable size and optional image overlay.

Demo

React

Value

SizeExtra SmallSmallMediumLargeExtra Large

Invert

Vue

Value

SizeExtra SmallSmallMediumLargeExtra Large

Invert

Example

React

// Import component
import { QrCode } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/qr_code.css';

return (
  <QrCode
    value="https://nayaone.com"
    size="md"
  />
);

Vue

<script setup lang="ts">
// Import component
import { QrCode } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/qr_code.css';
</script>

<template>
  <QrCode
    value="https://nayaone.com"
    size="md"
  />
</template>

Props

React

Name	Type	Required	Default	Description
value	string	Yes		The value to encode in the QR code
size	Size		md	Size of the QR code
encoding	QrCodeEncoding		H	Encoding of the QR code
invert	boolean		false	Whether to invert the QR code
overlaySrc	string		—	Optional image overlay source URL
overlayAlt	string		—	Alt text for the overlay image

Vue

Name	Type	Required	Default	Description
value	string	Yes		The value to encode in the QR code
size	Size		md	Size of the QR code
encoding	QrCodeEncoding		H	Encoding of the QR code
invert	boolean		false	Whether to invert the QR code
overlay-src	string		—	Optional image overlay source URL
overlay-alt	string		—	Alt text for the overlay image

Types

type QrCodeEncoding = 'H' | 'L' | 'M' | 'Q'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'