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

5Sections

5Hooks

25+Total

Explore components Back to home

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

01 — Primitives

Button

VARIANTS

SIZES

NOIR 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

VioletCyanGreenAmberRed

CONTEXT EXAMPLES

v1.0.0LiveDeployedBetaBreakingNewStableAvailable

03 — Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

Barlow0.95remline-height 1.75weight 400

Sharp, precise component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs cleanly with bold display headings.

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

CAPTION

Dates, meta info, footnotes, helper hints.

Barlow0.8remweight 400muted color

Deployed March 7, 2026 · Build #1024 · Production

<Text variant="caption">Deployed March 7, 2026</Text>

LABEL

Section identifiers, categories, uppercase monospace.

IBM Plex Mono0.65remuppercasetracking

default

Features

violet

01 — System

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

CODE

File paths, token names, inline code references.

IBM Plex Mono0.85remcyan-lightinline

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04 — Primitives

Card

◈Design

Cinematic Components

Glass panels, glow effects, and sharp contrast. Every component is built for dark mode from the ground up.

⚡Stack

Next.js 15 Ready

App Router, server components, TypeScript strict mode, and Tailwind v4 configured and ready to go.

◉Tokens

Design System

A complete set of design tokens in globals.css. Swap the violet for any accent color in one place.

USAGE

<Card card={{
  icon: '◈',
  tag: 'Design',
  tagVariant: 'violet',
  title: 'Cinematic Components',
  description: 'Glass panels, glow effects...',
}} />

05 — Theme System