COMPONENTS

6 of 8 primitives are React Server Components. Field and CopyButton are client components ('use client') — all others ship zero client JavaScript.

Button

Props: variant: 'primary' | 'secondary', size: 'sm' | 'md' | 'lg', as: 'button' | 'a'

<Button variant="primary" as="a" href="#">EXEC_HIRE</Button>
  <Button variant="secondary" as="a" href="#">DOWNLOAD_CV</Button>
  <Button variant="primary" size="sm" as="a" href="#">SM</Button>
  <Button variant="secondary" size="lg" as="a" href="#">LG</Button>

Accessibility: 44px touch target on md size. focus-visible outline using --ds-color-signal. Disabled anchors use aria-disabled="true" (anchors can't be natively disabled).

Field

Props: name, label, multiline?: boolean, rows?: number, error?: string

<Field name="email" label="$ email:" type="email" />
  <Field name="msg" label="$ message:" multiline rows={3} />
  <Field name="broken" label="$ broken:" error="Required field" />

Accessibility: Label always rendered and programmatically associated. aria-describedby points to error text. aria-invalid="true" set on error state.

Badge

Props: variant: 'default' | 'dot', size: 'sm' | 'md'

<Badge variant="dot">OPEN_TO_WORK</Badge>
  <Badge variant="default">AVAILABLE</Badge>
  <Badge size="sm">SMALL</Badge>

Accessibility: Dot is aria-hidden. Pulse animation suppressed under prefers-reduced-motion.

TerminalPanel

Props: borderStyle: 'solid' | 'dashed', as: 'div' | 'section' | 'article', header?: ReactNode

<TerminalPanel header="[ STATUS ]">Content here.</TerminalPanel>
  <TerminalPanel borderStyle="dashed">Dashed panel.</TerminalPanel>

StatTile

Props: value: string, label: string, variant: 'default' | 'compact'

<StatTile value="99" label="LH_SCORE" />
  <StatTile value="5+" label="YRS_EXP" />
  <StatTile value="1.2s" label="LCP" variant="compact" />

Accessibility: Rendered as <dl><dt>{label}</dt><dd>{value}</dd></dl> — screen readers announce "label: value".

CmdLine

Props: user?: string, command: string, output?: ReactNode, prompt?: string

<CmdLine command="cat README.md" />
  <CmdLine user="root@prod" prompt="#" command="whoami" output={<span>root</span>} />

KbdKey

Props: size: 'sm' | 'md'

<KbdKey>Ctrl</KbdKey>
  <KbdKey>+</KbdKey>
  <KbdKey>K</KbdKey>
  <KbdKey size="sm">Enter</KbdKey>

Accessibility: Uses semantic <kbd> element.

CopyButton

Props: text: string

<CopyButton text="pnpm install @/design-system" />

Behavior: Copies text to clipboard on click. Label changes from COPY to COPIED for 1.5s. Falls back silently if clipboard API is unavailable.

Composition Patterns

Stat grid using StatTile

Four StatTile components in a CSS grid. The grid layout stays in the consumer — primitives don't embed layout opinions.

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', border: '1px solid var(--ds-color-signal-subtle)' }}>
  <StatTile value="99" label="LH_SCORE" />
  <StatTile value="5+" label="YRS_EXP" />
  <StatTile value="1.2s" label="LCP" />
  <StatTile value="0" label="CLS" />
</div>