QR Code
QR Code is a component that generates a QR code from a string.
Installation
npx nopends-ui@latest add qr-code
Features
- Generates QR codes from any string data
- Uses shadcn/ui CSS variables
--foregroundand--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.
L
M
Q
H
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.