Standard duskmoon implemented 6 demos

QRCode

QRCode encodes a URL or payload for handoff to another device.

Import @duskmoon-dev/components/qr-code

4 API sections

11 documented props

4 behavior scenarios

Key API

valuetypesizeiconiconSizestatus

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

QRCode is most often configured through `value`, `type`, `size`, `icon`.

Covered behavior

Renders a canvas-style qr code by default

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and QRCode from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { QRCode } from "@duskmoon-dev/components/qr-code";

export function Example() {
  return (<QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>);
}

Preview

Renders a canvas-style qr code by default

test-backed

QRCode scenario from the component test coverage: renders a canvas-style qr code by default.

Source

import "@duskmoon-dev/components/styles.css";
import { QRCode } from "@duskmoon-dev/components/qr-code";

export function QRCodeRendersACanvasStyleDemo() {
  return (<QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>);
}

Preview

Supports svg type, size, color, background, and border control

test-backed

QRCode scenario from the component test coverage: supports svg type, size, color, background, and border control.

Source

import "@duskmoon-dev/components/styles.css";
import { QRCode } from "@duskmoon-dev/components/qr-code";

export function QRCodeSupportsSvgTypeSizeDemo() {
  return (<QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>);
}

Preview

Renders icon and expired refresh action

test-backed

QRCode scenario from the component test coverage: renders icon and expired refresh action.

Source

import "@duskmoon-dev/components/styles.css";
import { QRCode } from "@duskmoon-dev/components/qr-code";

export function QRCodeRendersIconAndExpiredDemo() {
  return (<QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>);
}

Preview

Supports loading and scanned status classes

test-backed

QRCode scenario from the component test coverage: supports loading and scanned status classes.

Source

import "@duskmoon-dev/components/styles.css";
import { QRCode } from "@duskmoon-dev/components/qr-code";

export function QRCodeSupportsLoadingAndScannedDemo() {
  return (<QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>
</div>

<div data-theme="moonlight">
  <QRCode
  value="https://duskmoon.dev/components"
  size={160}
  color="#111827"
  bgColor="#ffffff"
/>
</div>

API

The API reference below lists every parsed exported type or interface for QRCode. Start with `value`, `type`, `size`, `icon` for common usage.

Types: packages/components/src/components/qr-code/QRCode.types.ts Scenarios: packages/components/src/components/qr-code/QRCode.test.tsx

QRCodeProps interface extends Omit< ComponentProps<"div">, "children" | "onRefresh" >

Prop	Type	Required	Description
`value`	`string`	No	value configures QRCode.
`type`	`QRCodeType`	No	type configures QRCode.
`size`	`number`	No	size configures QRCode.
`icon`	`string \| ReactNode`	No	icon configures QRCode.
`iconSize`	`number`	No	iconSize configures QRCode.
`status`	`QRCodeStatus`	No	status configures QRCode.
`errorLevel`	`QRCodeErrorLevel`	No	errorLevel configures QRCode.
`color`	`string`	No	color configures QRCode.
`bgColor`	`string`	No	bgColor configures QRCode.
`bordered`	`boolean`	No	bordered configures QRCode.
`onRefresh`	`() => void`	No	onRefresh configures QRCode.

QRCodeType type

"canvas" | "svg"

QRCodeStatus type

"active" | "expired" | "loading" | "scanned"

QRCodeErrorLevel type

"L" | "M" | "Q" | "H"