rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

QrCode

Generates and displays a QR code image from a URL or text string.

Examples

Basic

Scannable QR code linking to rokle.app.

Different sizes

The same scannable QR code at three sizes.

With label

Scannable QR code for rokle.app/signup with descriptive label.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { QrCode } from "@rokle/components";
import { QrCode } from "@rokle/components";

export function Example() {
  return <QrCode />;
}

API Reference

PropTypeDefaultDescription
valuestring-Data to encode in the QR code.
sizenumber200Width and height of the QR code in pixels.
errorCorrection"L" | "M" | "Q" | "H""M"Error correction level.