QR Code

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

Installation

        npx shadcn-svelte@latest add http://adv76.github.io/kibo-svelte/r/qr-code.json

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.

Pill

A flexible badge component designed for a variety of use cases.

Rating

A star rating component with keyboard navigation and hover effects.