All components
QR Code
Scannable code frames with a centered logo overlay, sized from 2xs to 2xl.
1234567891011121314151617import { QrCode } from "#components/ui/ark-ui/qr-code.tsx";
export function Example() { return ( // the real Ark QrCode machine wearing the recipe styles — it encodes // the value into a scannable matrix and positions the logo overlay; // modules fill with currentColor <QrCode.Root defaultValue="https://stylexblocks.com" size="md"> <QrCode.Frame> <QrCode.Pattern /> </QrCode.Frame> <QrCode.Overlay> <Logo /> </QrCode.Overlay> </QrCode.Root> );}Sizes
2xs
xs
sm
md
lg
xl
2xl
Install
1npx stylexblocks add qr-codeSource
components/ui/ark-ui/qr-code.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140import * as stylex from "@stylexjs/stylex";import { QrCode as ArkQrCode } from "@ark-ui/react/qr-code";import type { StyleOverrideProps } from "#lib/recipe-props.ts";import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const qrCodeRoot = stylex.create({ base: { position: 'relative', width: 'fit-content', '--qr-code-overlay-size': 'calc(var(--qr-code-size) / 3)', },})
const qrCodeRootSizes = stylex.create({ '2xs': { '--qr-code-size': '40px', }, xs: { '--qr-code-size': '64px', }, sm: { '--qr-code-size': '80px', }, md: { '--qr-code-size': '120px', }, lg: { '--qr-code-size': '160px', }, xl: { '--qr-code-size': '200px', }, '2xl': { '--qr-code-size': '240px', }, full: { '--qr-code-size': '100%', },})
const qrCodeFrame = stylex.create({ base: { width: 'var(--qr-code-size)', height: 'var(--qr-code-size)', fill: 'currentColor', },})
const qrCodeOverlay = stylex.create({ base: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: 'var(--qr-code-overlay-size)', height: 'var(--qr-code-overlay-size)', padding: spacing._1, backgroundColor: semanticColors.bg, borderRadius: semanticRadii.indicatorSm, },})
export type QrCodeSize = keyof typeof qrCodeRootSizes
/** * QrCode — the real Ark UI QrCode machine wearing the recipe styles: the * machine encodes `defaultValue`/`value` into a scannable matrix * (`<QrCode.Frame><QrCode.Pattern /></QrCode.Frame>`) and positions the * logo `Overlay` itself. Only the root consumes the size axis * (`--qr-code-size`), so `size` is a plain prop on Root. */function mergeClassName(base: string | undefined, extra: unknown) { return typeof extra === "string" && extra.length > 0 ? [base, extra].filter(Boolean).join(" ") : base;}
// recipe maps hold stylex.props-compatible values by construction; one cast// bridges StyleX's variadic genericsfunction sx( styles: ReadonlyArray<unknown>, palette: StyleOverrideProps["palette"], style: StyleOverrideProps["style"],) { return stylex.props( ...([palette, ...styles, style] as unknown as ReadonlyArray<never>), );}
export type QrCodeRootProps = Omit<React.ComponentProps<typeof ArkQrCode.Root>, "style"> & StyleOverrideProps & { size?: QrCodeSize; };
function Root(allProps: QrCodeRootProps) { const { size = "md", palette, style, className, ...rest } = allProps as QrCodeRootProps & Record<string, unknown>; const p = sx([qrCodeRoot.base, qrCodeRootSizes[size]], palette, style as never); return ( <ArkQrCode.Root data-size={size} {...rest} className={mergeClassName(p.className, className)} style={p.style} /> );}Root.displayName = "QrCodeRoot";
/** Wraps a machine part with its slot's recipe styles. */function withPart<P extends { className?: string; style?: React.CSSProperties }>( Part: React.ComponentType<P>, styles: ReadonlyArray<unknown>, displayName: string,) { function StyledPart(allProps: Omit<P, "style"> & StyleOverrideProps) { const { palette, style, className, ...rest } = allProps as P & StyleOverrideProps & Record<string, unknown>; const p = sx(styles, palette, style as never); return ( <Part {...(rest as unknown as P)} className={mergeClassName(p.className, className)} style={p.style} /> ); } StyledPart.displayName = displayName; return StyledPart;}
export const QrCode = { Root, Frame: withPart(ArkQrCode.Frame, [qrCodeFrame.base], "QrCodeFrame"), Pattern: ArkQrCode.Pattern, Overlay: withPart(ArkQrCode.Overlay, [qrCodeOverlay.base], "QrCodeOverlay"),};