Developer Standards Showcase

Explore the canonical theme tokens from design/ui-standards.md and preview how buttons, cards, forms, tables, and alerts respond to light/dark mode and 30 comprehensive themes organized across 6 categories.

Implementation Guide

For Admins: Quick Theme Switching

To implement user-configurable themes in your application:

Copy the CSS: Import globals.css from this demo into your project
Add Theme Switcher: Use document.documentElement.dataset.theme = 'theme-name' to switch themes
Store Preferences: Save user theme selection to localStorage or database
Available Themes (31): Aurora, Zen, Sterling, Justice, Haven (Professional & Business) • Syntax, Neon, Nexus, Velocity, Quantum, Centerpiece (Tech & Digital) • Vogue, Prism, Comic, Opulence, Canvas (Creative & Artistic) • Terracotta, Verdant, Summit, Pastel, Desert (Nature & Organic) • Vitality, Scholar, Wellness, Frontier, Academy (Healthcare & Education) • Ember, Valor, Voyage, Harmony, Luxe (Lifestyle)

Code Example:

// Set theme programmatically
const setTheme = (theme) => {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
};

// Load saved theme on app start
const savedTheme = localStorage.getItem('theme') || 'aurora';
setTheme(savedTheme);

All components automatically adapt to theme changes via CSS custom properties. No component updates required.

Light

Effects

Theme Category

Effect Category

Flowing gradient waves with ethereal glow

Perfect for SaaS platforms and B2B applications. Features modern rounded corners, friendly gradients, and balanced spacing that builds trust while remaining approachable. Ideal for startups, tech companies, and productivity tools that want to feel contemporary without being overwhelming.

All tokens and components on this page respond live to your selections.

Effect Placements

Visual effects can be placed in 4 different contexts: background (full viewport), hero (banner sections), card (small containers), and section (content blocks). Each placement adapts the effect for optimal visibility.

Hero Placement

Transform Your Experience

Effects adapt to your chosen theme, using primary and accent colors automatically.

Aurora Waves

Selected Effect

This card shows the currently selected effect. Change the effect above to preview different options.

Particles

Ambient Particles

Floating particles create depth and movement without overwhelming card content.

Geometry

Geometric Mesh

Low-poly meshes create modern, tech-forward aesthetics for digital products.

Implementation Code

import { VisualEffect } from '@/components/VisualEffect';

// Hero banner with effect
<section className="relative overflow-hidden min-h-[60vh]">
  <VisualEffect 
    placement="hero" 
    effect="aurora" 
    intensity="normal" 
  />
  <div className="relative z-10">
    <h1>Hero Content</h1>
  </div>
</section>

// Card with subtle effect
<Card className="relative overflow-hidden">
  <VisualEffect 
    placement="card" 
    effect="neuro" 
    intensity="subtle" 
  />
  <CardContent className="relative z-10">
    Content here
  </CardContent>
</Card>

Buttons & CTAs

Buttons inherit tokenized radius, font weight, focus treatments, and motion curves so style changes propagate automatically.

Success badge

Warning badge

Info badge

Cards, Content & Navigation

Card curvature, elevation, and spacing values pipe straight from `--card-radius`, `--card-shadow`, and `--stack-gap`.

Guidance

Keep primitives token-driven. Update theme CSS instead of hardcoding values in components.

Motion

Animate within the timing curve for the active theme and honor prefers-reduced-motion.

Spacing

Use --stack-gap for vertical rhythm and --section-gap between major regions.

Forms & Inputs

Inputs share control height, radius, and focus treatments for layout consistency.

NameTheme preferenceNotes

Table, Alerts & Tokens

Tables, alerts, and live token swatches all bind to the same CSS variables defined in the standards.

Sample table

Token	Purpose
--control-height	Buttons & inputs share this value for layout consistency.
--motion-duration-base	Primary transition timing for hover and focus states.
--icon-stroke	Standard stroke width for glyphs and iconography.

Alerts

Success — Token changes saved.

Warning — Contrast is borderline.

Destructive — Token missing.

Info — Hover states ease per theme.

Live token swatches

--background

—

--foreground

—

--primary

—

--accent

—

--secondary

—

--success

—

--warning

—

--info

—

--card-radius

—

--button-radius

—

--control-height

—

--stack-gap

—

--section-gap

—

--motion-duration-base

—

--motion-ease

—

--icon-stroke

—

Navigation Components

Navigation bars, breadcrumbs, and tabs provide consistent wayfinding across themes.

Navigation Bar

Breadcrumbs

Tabs

Tab content goes here.

Interactive Feedback

Loading states, progress indicators, and notifications provide user feedback.

Loading States

Spinner

Skeleton

Progress & Tooltip

Progress Bar

65% complete

Tooltip

List Components

Styled lists, definitions, and chips for organizing content.

Unordered List

First item with marker
Second item
Third item

Ordered List

Step one
Step two
Step three

Definition List

Term: Definition goes here
Another: More details

Chip List

React TypeScript Tailwind

Data Display

Statistics cards and empty states for data visualization.

12,458

Total Users

↑ 12% from last month

$45,231

Revenue

↑ 8% from last month

98.5%

Uptime

↓ 0.5% from last month

No items found

Get started by creating your first item.

Extended Form Elements

Checkboxes, radios, toggles, sliders, and more.

Selection Controls

Checkboxes

Option oneOption two

Radio Buttons

Choice AChoice B

Inputs & Controls

Toggle Switch

Enable notifications

Range Slider

Search Input

File Upload

Drop files here or click to browse

Supports: PDF, PNG, JPG (max 10MB)

Rich Components

Accordions, avatars, steppers, and timelines.

Accordion

Content for section 1 goes here.

Content for section 2 goes here.

Avatars & Icons

Avatars

Icon Buttons

Stepper

✓

Complete

In Progress

Pending

Review

Timeline

Project Started

Initial planning phase completed

2 days ago

Milestone Reached

First major feature delivered

1 day ago

Form Validation

Visual feedback for form validation states.

Valid Input✓ Email is valid

Invalid Input⚠ Please enter a valid email

Extended Typography

Blockquotes and link variants for richer text content.

"Design is not just what it looks like and feels like. Design is how it works."— Steve Jobs

Link Styles

This is a primary link and here's an underlined link for reference.