Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkQRCode

Generates a locally rendered SVG QR code for an absolute HTTP or HTTPS URL. The QR generator is bundled with WelkUI, so consumers do not need to install it separately. Invalid URLs show an accessible error instead.

Usage

React / TSX

import { WelkQRCode } from "@welkui/react";

<WelkQRCode url="https://ui.welkdock.com" />
<WelkQRCode url="https://ui.welkdock.com" originalCode />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

Valid absolute HTTP(S) URLs render a high-contrast, accessible SVG.
Invalid or unsupported URL schemes render an error message.
card: adds an optional heading, subtitle and customizable card background.
Comic rounded modules by default; originalCode restores square modules.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Website URL

A complete HTTPS address renders as a high-contrast QR code.

Key propsurl="https://ui.welkdock.com"

Long URL

Longer URLs produce denser codes. Keep the code large and unobstructed when displaying it.

Key propsurl="https://example.com/mission/briefing?team=welkui"

Invalid URL

URLs without an HTTP or HTTPS scheme show an accessible error.

Enter a valid URL beginning with http:// or https://.

Key propsurl="welkdock.com"

Card

Add a heading, supporting copy and themed card background around the framed code.

Visit WelkUI

Scan to explore the component library.

Key propsvariant="card" title="Visit WelkUI" subtitle="Scan to explore." cardColor="#ffda57"

Original square modules

Set originalCode to render traditional square modules with the same encoded URL.

Key propsoriginalCode

Usage notes and accessibility

Pass a complete URL beginning with http:// or https://. The component encodes the supplied string as-is and does not rewrite or shorten it.
The QR code stays black on white for scanning; the surrounding frame uses the WelkUI comic theme. Keep the code unobstructed and leave its white margin intact.
The QR is generated locally in the browser. No URL is sent to a third-party QR service.
Use variant="card" for a framed card layout. title and subtitle are optional, and cardColor accepts any CSS background color; without the card variant, the original appearance is unchanged.
Rounded modules are the default comic treatment and keep the encoded module positions unchanged. Set originalCode to render traditional square pixels.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkQRCode prop reference
Prop	Type	Default	Description
`url`	`string`	Required	Absolute HTTP or HTTPS URL to encode.
`variant`	`"default" \| "card"`	"default"	Use the original QR frame or present it inside a themed card.
`title`	`string`	Unset	Optional heading in the card variant.
`subtitle`	`string`	Unset	Optional supporting text in the card variant.
`cardColor`	`CSSProperties["backgroundColor"]`	Theme paper	Optional CSS background color for the card variant.
`originalCode`	`boolean`	false	Use traditional square QR modules instead of comic rounded modules. Finder and timing patterns remain square in both modes.

This component supports the props listed above, not arbitrary native HTML attributes.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.