UI Primitives

Component Library

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

8Primitives

7Sections

3Hooks

25+Total

Explore components Back to home

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

01: Primitives

Button

VARIANTS

SIZES

CONTEXTUAL

AS LINKS

View all components Back to home

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

02: Primitives

Badge

COLOR VARIANTS

NeonCreamWarningErrorInfo

IN CONTEXT

LiveElevatedCriticalScanningStableDeployedMappingCharted

03: Primitives

Text

BODY

Descriptions, readable blocks, paragraphs.

Space Grotesk15pxline-height 1.8

Topographic rendering of infrastructure state. Use this variant for descriptions, feature explanations, and readable text blocks. Pairs with monospace labels and neon accents.

<Text variant="body">Your content here.</Text>

CAPTION

Dates, coordinates, meta info, footnotes.

Survey completed 2026-03-18 · 14 regions · Topology v3.2

<Text variant="caption">Survey completed 2026-03-18</Text>

LABEL

Section headers, uppercase identifiers.

default

Capabilities

neon

Section 02

<Text variant="label">Capabilities</Text>

CODE

File paths, token names, inline code.

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04: Primitives

Card

◎

Core

Contour Mapping Engine

Real-time topographic rendering of infrastructure state. Every service, node, and dependency plotted as elevation data. Zoom from cluster-wide ridgelines down to individual container valleys.

⬡

Analysis

Fault Line Detection

Predictive stress modeling identifies failure boundaries before incidents cascade across regions.

△

Observe

Survey Benchmarks

Fixed reference points across your stack that track drift over time. Know when the ground shifts.

USAGE

<Card card={{
  icon: '◎',
  tag: 'Core',
  tagVariant: 'neon',
  title: 'Contour Mapping Engine',
  description: 'Real-time topographic rendering...',
  wide: true,
}} />

05: Theme System