Stalk UI

Component

QrCode

Renders a scannable QR code, optionally with a center logo.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/qr-code

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<QrCode value="https://example.com" aria-label="QR code linking to example.com" />
Theme
<QrCode
  value="https://example.com"
  size={160}
  qrStyle="dots"
  eyeRadius={8}
  fgColor="#4f46e5"
  aria-label="Styled QR code"
/>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`className``string`No--
`'aria-label'``string`No-Accessible name announced for the generated code. The underlying canvas is<br />decorative, so the wrapper exposes the \`img\` role with this label.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/qr-code.json`
  • Recipe: `qrCode`
  • Files: `src/components/ui/qr-code.tsx`