QR Code

QR Code is a component that generates a QR code from a string.

Installation

npx kibo-ui add qr-code

Features

Generates QR codes from any string data
Uses shadcn/ui CSS variables --foreground and --background
Supports custom foreground and background colors
Renders as SVG for crisp display at any size
Fully responsive with automatic sizing

Examples

Styling

The QR code is wrapped in a div so you can pass in a custom class name to style it.

Robustness

You can change the robustness of the QR code by passing the robustness prop. Higher levels offer a better error resistance but reduce the symbol's capacity.

Server Component

You can also use the QRCode component as a React Server Component, however you'll need to pass in the foreground and background prop manually as hex values.