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

RETRO 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

YellowCobaltCoralGreen

CONTEXTUAL EXAMPLES

DesignComponentsAuthAI ReadyNewFeaturedHotAvailable

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

DM Sans0.95remline-height 1.75font-weight 500

Chunky, playful component copy. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs beautifully with Fredoka display headings.

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

CAPTION

Dates, meta info, footnotes, helper hints.

DM Sans0.8remfont-weight 500muted color

Published April 1, 2026 · 3 min read · Retro Themes

<Text variant="caption">Published April 1, 2026</Text>

LABEL

Section sub-labels, categories, uppercase identifiers.

DM Sans0.7remuppercaseletter-spacing

default

Features

cobalt

New Section

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

CODE

File paths, token names, inline code references.

monospace0.85reminline

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04: Primitives

Card

🎨Design

Full Design System

Tokens, components, and patterns built for Tailwind v4. Colors, type, spacing, all pre-configured.

🧩Components

UI Component Library

Buttons, cards, badges, forms, text. Every primitive you reach for, already done.

🔐Auth

Auth Pages

USAGE

<Card card={{
  icon: '🎨',
  tag: 'Design',
  tagVariant: 'yellow',
  title: 'Full Design System',
  description: 'Tokens, components, and patterns...',
}} />

05: Theme System