design-infraReport a problem or share feedback← Catalog
Qr Code
curatedfreekibo-ui/qr-code
QR Code is a component that generates a QR code from a string.
drop-inTechnicalTrustworthy
$
npx shadcn@latest add @kibo-ui/qr-codenpm deps: culori, qrcode
Our notes
QR code (qrcode lib) that reads --foreground/--background at runtime — but only parses oklch() values; our DESIGN.md themes emit hex, so it silently falls back to near-black/white. Pass foreground/background props. Server variant included.- Source
- Kibo UI
- Kind
- component
- Categories
- code
- Use as
- drop-in — replaces your component
- Applies to
- code
- Motion
- not tagged (static or unknown)
- Licence
- MIT (shadcnblocks/kibo, originally Hayden Bleasel). Premium blocks are sold at shadcnblocks.com — not catalogued.
- Live demo
- www.kibo-ui.com
- Docs
- www.kibo-ui.com
Similar
Compare all 4 →- Code Blockkibo-ui/code-blockShiki code block with tabs, line numbers, highlight/diff/focus transformers and copy. Theme-aware chrome; diff colours are semantic emerald/rose. Heavy: shiki + react-icons.
- Snippetkibo-ui/snippetTabbed install-command snippet with copy (npm/pnpm/bun). Ideal for dev-tool landing pages.
- Code Blockaceternity/code-blockSyntax-highlighted block with tabs (react-syntax-highlighter).