COMPONENTS

6 of 7 primitives are React Server Components. Field is a client component ('use client') for controlled input state — 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.

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>