Themes

All 19 themes of ValyroUI with live previews, light and dark modes, fonts and the CSS to import: brands, OS design systems, styles and games.

Brands

Vercel (Free, MIT)

Geist: monochrome surfaces, hairline borders and crisp shadows.

import 'valyro-ui/styles.css';
import 'valyro-ui/fonts/geist.css';
import 'valyro-ui/fonts/geist-mono.css';

Linear (Pro)

Dark-first SaaS: dense layout, violet accent, subtle gradient edges, Inter.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/linear.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Stripe (Pro)

Fintech clarity: indigo accent, airy white surfaces, soft layered shadows.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/stripe.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Anthropic (Pro)

Warm ivory and clay, serif headings, calm editorial rhythm.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/anthropic.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/source-serif-4.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Playrix (Pro)

Casual-game brand: Playrix green candy buttons, sky-blue links, rounded white cards on a leafy page.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/playrix.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/unbounded.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Manacost (Pro)

Hearthstone news portal: white pages, portal-blue top rules and table heads, navy accent, yellow markers.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/manacost.css';
import 'valyro-ui-pro/fonts/roboto-flex.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

OS design systems

Liquid Glass (Free, MIT)

Apple Liquid Glass: translucent frosted materials and capsule controls.

import 'valyro-ui/styles.css';

Material (Pro)

Material 3: tonal surfaces from one seed colour, large radii, Roboto Flex.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/material.css';
import 'valyro-ui-pro/fonts/roboto-flex.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Fluent (Pro)

Fluent 2 (Windows 11): Mica and Acrylic materials, Segoe UI, soft depth.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/fluent.css';
import 'valyro-ui-pro/fonts/selawik.css';

Styles

Paper (Pro)

Notion-like editorial: near-white page, quiet greys, almost no borders.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/paper.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Brutalism (Pro)

Neo-brutalism: thick black outlines, hard offset shadows, loud flat colour.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/brutalism.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/unbounded.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

High Contrast (Free, MIT)

WCAG AAA: black on white, heavy focus rings, no transparency, Atkinson Hyperlegible.

import 'valyro-ui/styles.css';
import 'valyro-ui/themes/high-contrast.css';
import 'valyro-ui/fonts/atkinson-hyperlegible-next.css';
import 'valyro-ui/fonts/jetbrains-mono.css';

Terminal (Pro)

Monospace everywhere, phosphor green on black with amber accents, square corners.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/terminal.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Games

Pixel (Pro)

8-bit games: pixel font, blocky bevelled controls, stepped pixel shadows.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/pixel.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';
import 'valyro-ui-pro/fonts/pixelify-sans.css';
import 'valyro-ui-pro/fonts/press-start-2p.css';

Cyber (Pro)

Neon sci-fi HUD: chamfered corners, cyan and magenta glow, technical type.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/cyber.css';
import 'valyro-ui-pro/fonts/geist.css';
import 'valyro-ui-pro/fonts/unbounded.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Fantasy (Pro)

Classic RPG: leather and parchment, forged-gold buttons, ruby-set corner guards, Cinzel and Garamond.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/fantasy.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';
import 'valyro-ui-pro/fonts/cinzel.css';
import 'valyro-ui-pro/fonts/eb-garamond.css';

Mythic (Pro)

Obsidian and gold leaf: gold hairlines and corner lozenges, spaced capital labels, Garamond headings over Inter.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/mythic.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/eb-garamond.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Frost (Pro)

Steel and ice: gunmetal night, polished-silver buttons, ice-shard corners, chamfered plates, Cinzel over Inter.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/frost.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/cinzel.css';
import 'valyro-ui-pro/fonts/eb-garamond.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';

Hearthstone (Pro)

HearthPulse tavern: parchment and red cloth, timber and gold frames, glossy mana-blue buttons, HSDisplay headings.

import 'valyro-ui-pro/styles.css';
import 'valyro-ui-pro/themes/hearthstone.css';
import 'valyro-ui-pro/fonts/hs-display.css';
import 'valyro-ui-pro/fonts/inter.css';
import 'valyro-ui-pro/fonts/jetbrains-mono.css';