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

3Hooks

25+Total

Explore components Back to home

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

01 — Primitives

Button

VARIANTS

SIZES

GLASS 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

SkyIndigoCyanVioletEmerald

GLASS CONTEXT

New releasePremiumLiveBetaStableJust launchedFeaturedAvailable

03 — Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

Inter0.95remline-height 1.75weight 400

Premium glassmorphism component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs beautifully with Space Grotesk display headings.

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

CAPTION

Dates, meta info, footnotes, helper hints.

Inter0.8remweight 400muted color

Published March 7, 2026 · 3 min read · Glass Design

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

LABEL

Section sub-labels, categories, uppercase identifiers.

Inter0.7remuppercaseletter-spacing

default

Features

sky

New Section

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

CODE

File paths, token names, inline code references.

monospace0.85remsky colorinline

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04 — Primitives

Card

✦Design

Glassmorphism UI

Frosted glass cards, layered transparency, and soft gradient backgrounds. The premium aesthetic, fully built out.

⚡Stack

Next.js 15 Ready

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

◈Tokens

Design System

A full set of design tokens in globals.css. Swap colors, blur, and gradients in one place and watch everything update.

USAGE

<Card card={{
  icon: '✦',
  tag: 'Design',
  tagVariant: 'sky',
  title: 'Glassmorphism UI',
  description: 'Frosted glass cards...',
}} />

05 — Theme System

Color Tokens

glass-sky

#38bdf8

glass-indigo

#818cf8

glass-cyan

#22d3ee

glass-violet

#a78bfa

glass-emerald

#34d399

glass-deep

#020617

glass-navy

#0f172a

glass-text

#f8fafc

glass-muted

#94a3b8

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

“Page not found” — shown when a route doesn't exist.

→ Preview

ERROR PAGE

500

“Something went wrong” — 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.