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

6Sections

3Hooks

25+Total

Explore components Back to home

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

01: Primitives

Button

VARIANTS

SIZES

ARCADE 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

MagentaYellowChromeGreenCyan

CONTEXT

LiveRecordingIdleConnectedBuffering

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

Space Grotesk0.95remline-height 1.75font-weight 500

Chrome-plated component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs with Bungee display headings for that arcade machine aesthetic.

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

CAPTION

Dates, meta info, footnotes, helper hints.

Space Grotesk0.8remfont-weight 500muted color

Published March 22, 2026 // 3 min read // Visual Engine

<Text variant="caption">Published March 22, 2026</Text>

LABEL

Section sub-labels, categories, uppercase identifiers.

Space Grotesk0.7remuppercaseletter-spacing

default

Features

magenta

New Section

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

CODE

File paths, token names, inline code references.

monospace0.85remmagentainline

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04: Primitives

Card

AUDIO REACTIVE

Every pixel responds to your audio input. Kick drums trigger geometry shifts. Hi-hats scatter particles. Bass warps the entire canvas. Zero latency FFT processing at 120fps.

Core

SHADER STACKS

Layer custom GLSL shaders like effects pedals. 60+ built-in shaders from chromatic aberration to feedback loops. Write your own or fork from the community library.

Creative

MIDI MAPPING

Map any visual parameter to any MIDI controller. Twist a knob on your Akai and watch color palettes shift in real time. Full MPE support for expressive control.

Control

USAGE

<Card card={{
  icon: '01',
  tag: 'Core',
  tagVariant: 'yellow',
  title: 'AUDIO REACTIVE',
  description: 'Every pixel responds to your audio...',
}} />

05: Theme System