Overview
Components
Text Animations
QRCode
QR code generator with rounded finder patterns and dot-style data modules.
qrcode
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/qrcode.json
Install dependencies
Install the required packages for this component:
pnpm add qrcode
Copy the Source Code
Copy and paste the following code into your project:
qrcode.svelte
index.ts
Folder Structure
Folder Structure
Examples
Custom Colors
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | required | The encoded text or URL used to generate the QR code. |
size | number | 268 | Controls the rendered width and height of the SVG in pixels. |
fgColor | string | "var(--foreground)" | Sets the foreground color used for the modules and finder patterns. |
bgColor | string | "var(--background)" | Sets the background color of the QR surface. |
errorCorrectionLevel | "L" | "M" | "Q" | "H" | "M" | Controls the QR error correction level passed to the generator. |
class | string | '' | Custom classes merged onto the root SVG element. |