UI Primitives

Component Library

Every component ships fully typed and prop-driven. Customize colors via @theme tokens in globals.css. No component edits needed.

Primitives8

Sections5

Hooks5

Total25+

Explore components Back to home

01Button 02Badge 03Text 04Card 05Tokens 06System Pages

01 — Primitives

Button

VARIANTS

SIZES

LAB COMBOS

AS LINKS

View all components Back to home

Pass an href prop and Button renders as next/link automatically.

02 — Primitives

Badge

COLOR VARIANTS

BlueGreen

LAB CONTEXT

Status: StableEXP-001Build: Verifiedv1.0.0Type-safeStackDeployPrimitives

03 — Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

JetBrains Mono0.875remline-height 1.8muted color

Precision-engineered component copy. Use this for descriptions, feature explanations, and readable prose.

<Text variant="body">Precision-engineered component c...</Text>

CAPTION

Dates, meta info, footnotes.

JetBrains Mono0.78remfaint colorsecondary

Published 2026-03-07 · 3 min read · LAB // NEXT

<Text variant="caption">Published 2026-03-07 · 3 min rea...</Text>

LABEL

Section sub-labels, identifiers, tags.

JetBrains Mono0.62remuppercaseletter-spacing

RESEARCH COMPOUNDS

<Text variant="label">RESEARCH COMPOUNDS...</Text>

CODE

File paths, token names, inline code.

JetBrains Mono0.82remblue colormonospace

src/app/globals.css

<Text variant="code">src/app/globals.css...</Text>

04 — Primitives

Card

EXP-001

Component Library

25+ fully typed UI primitives. Buttons, badges, cards, inputs, and layout components. Each documented and ready to drop in.

PRIMITIVES

EXP-002

Next.js 15 App Router

Built on Next.js 15 with App Router, Server Components by default, and React 19. No legacy patterns, no workarounds.

STACK

EXP-003

TypeScript Strict Mode

Full TypeScript 5 coverage in strict mode. All interfaces, component props, and return types are defined. Zero any escapes.

TYPE-SAFE

USAGE

<Card card={{
  expCode: 'EXP-001',
  icon: 'atom',
  tag: 'PRIMITIVES',
  tagVariant: 'blue',
  title: 'Component Library',
  description: '25+ fully typed UI primitives.',
}} />

05 — Theme System

Color Tokens

lab-blue

#00d4ff

lab-green

#00ff9d

lab-bg

#040810

lab-bg-2

#060d1a

lab-bg-3

#091525

lab-text

#d8eef5

HOW TO SWAP TOKENS

All tokens live in src/app/globals.css under @theme. Change any value and every component updates automatically.

See it live on home

06 — System

System Pages

404 PAGE

404

“Compound not found”. Shown when a route doesn't exist.

→ Preview

ERROR PAGE

ERR

“Experiment failed”. Shown on runtime exceptions.

→ Preview

The 404 page is live at any unknown route. Try /this-does-not-exist. The error page triggers on runtime exceptions.