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

SOLAR 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

YellowCoralSky

SOLAR CONTEXT

Now shippingNewFeaturedv15StudioTypeScriptDesignAuth

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

DM Sans0.95remline-height 1.75

Warm component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales with care and pairs well with Plus Jakarta Sans display headings.

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

CAPTION

Dates, meta info, footnotes, helper hints.

DM Sans0.8remmuted color

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

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

LABEL

Section sub-labels, categories, uppercase identifiers.

Plus Jakarta Sans0.7remuppercaseletter-spacing

Section Label

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

CODE

File paths, token names, inline code references.

monospace0.85remyellowinline

src/app/globals.css

@/components/ui/Button

variant="primary"

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

04: Primitives

Card

✶Design

Warm UI System

Deep amber backgrounds, golden accents, and smooth rounded shapes. A warm aesthetic that stands out without being loud.

⚡Stack

Next.js 15 Ready

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

◎Tokens

Design Tokens

All colors, radii, and spacing as CSS variables in globals.css. Customize the whole system from one file.

USAGE

<Card card={{
  icon: '✶',
  tag: 'Design',
  tagVariant: 'yellow',
  title: 'Warm UI System',
  description: 'Deep amber backgrounds...',
}} />

05: Theme System

Color Tokens

solar-yellow

#F5C518

solar-coral

#FF6B4A

solar-sky

#5BB8F5

solar-bg

#1C1208

solar-bg-deep

#261A0A

solar-bg-raise

#2E2010

solar-text

#F5EFE0

solar-muted

#A8947E

solar-coral-dark

#E5502E

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

◎

“Page not found.” Shown when a route does not exist.

→ Preview

ERROR PAGE

☀️

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