COMPONENTS

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

Button

Prop	Type	Default	Required
`variant`	`'primary' \| 'secondary'`	`'primary'`	no
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	no
`as`	`'button' \| 'a'`	`'button'`	no

EXEC_HIRE DOWNLOAD_CV SM LG

SOURCE

<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 --color-primary-500. Disabled anchors use aria-disabled="true" (anchors can't be natively disabled).

Field

Prop	Type	Default	Required
`name`	`string`	—	yes
`label`	`string`	—	yes
`type`	`string`	`'text'`	no
`multiline`	`boolean`	`false`	no
`rows`	`number`	`3`	no
`error`	`string`	—	no

$ email:

$ message:

$ broken:Required field

SOURCE

<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

Prop	Type	Default	Required
`variant`	`'default' \| 'dot'`	`'default'`	no
`size`	`'sm' \| 'md'`	`'md'`	no

OPEN_TO_WORKAVAILABLESMALL

SOURCE

<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

Prop	Type	Default	Required
`borderStyle`	`'solid' \| 'dashed'`	`'solid'`	no
`as`	`'div' \| 'section' \| 'article'`	`'div'`	no
`header`	`ReactNode`	—	no

[ STATUS ]

Content here.

Dashed panel.

SOURCE

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

WindowChrome

Prop	Type	Default	Required
`size`	`number`	`10`	no
`className`	`string`	—	no
`style`	`CSSProperties`	—	no

SOURCE

<WindowChrome />
  <WindowChrome size={12} />
  <WindowChrome size={9} />

Renders the three macOS-style traffic-light dots (red/yellow/green) as a pure RSC. Dots are aria-hidden="true" — purely decorative, no focus management. The size prop sets dot diameter in px; pass it explicitly for context-aware sizing (9px mobile title bar, 10px shell, 12px desktop topbar).

StatTile

Prop	Type	Default	Required
`value`	`string`	—	yes
`label`	`string`	—	yes
`variant`	`'default' \| 'compact' \| 'display'`	`'default'`	no

LH_SCORE: 99

YRS_EXP: 5+

LCP: 1.2s

SOURCE

<StatTile value="99" label="LH_SCORE" variant="display" />
  <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

Prop	Type	Default	Required
`command`	`string`	—	yes
`user`	`string`	`'erikunha@dev'`	no
`prompt`	`string`	`'$'`	no
`output`	`ReactNode`	—	no

erik@portfolio:~$cat README.md

root@prod#whoami

root

SOURCE

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

KbdKey

Prop	Type	Default	Required
`size`	`'sm' \| 'md'`	`'md'`	no

Ctrl+KEnter

SOURCE

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

Accessibility: Uses semantic <kbd> element.

CopyButton

Prop	Type	Default	Required
`text`	`string`	—	yes

SOURCE

<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.

LH_SCORE: 99

YRS_EXP: 5+

LCP: 1.2s

CLS: 0

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