405 guides · updated daily

The Empire UI blog

Practical guides on UI styles and effects - every article ships free, working React & Tailwind code.

All UI Styles Components React Tailwind Animation Tools Comparisons Design Systems Advanced

#react #css #tailwind #animation #glassmorphism #next.js #design #performance #accessibility #dark mode #css variables #framer motion #neumorphism #responsive #dashboard #saas #ecommerce #landing page #button #card #form #navigation #typography #gradient #patterns

10 articles · #css variables · showing 1-10

Code editor showing CSS custom properties and React theming code

2026-09-19 · 9 min read

Multi-Theme System in React: CSS Variables + Context + localStorage

Build a production-grade multi-theme system in React using CSS custom properties, Context API, and localStorage - with zero re-renders and instant persistence.

themingcss variables

Abstract colorful CSS gradient code on a dark monitor screen

2026-07-27 · 8 min read

Advanced CSS Custom Properties: @property, Animatable Tokens

Master @property, typed CSS tokens, and animatable custom properties to build transitions that vanilla CSS variables simply can't do.

css variables@property

Dark code editor screen displaying CSS color variables on black background

2026-07-26 · 8 min read

Dark Mode Color Tokens: Building a Theme That Doesn't Break Everything

Stop shipping dark mode as an afterthought. Here's how to build a real color token system with CSS variables that survives theming, components, and third-party libraries.

dark modetokens

Code editor screen showing animation timing and CSS variable declarations

2026-07-26 · 8 min read

Motion Design Tokens: Systematising Easing, Duration and Delay

Stop hardcoding cubic-bezier values everywhere. Learn how to build a motion token system for easing, duration, and delay that scales across your entire design system.

motiondesign tokens

Dark UI color palette swatches glowing on a screen

2026-07-05 · 8 min read

Best UI Color Palettes of 2026: 20 Combinations for Dark Themes

20 handpicked dark-mode color palettes for 2026 UI design - with CSS variables, contrast ratios, and real pairings that actually work in production.

color palettesui design

Dark code editor screen with React component code on monitor

2026-06-23 · 8 min read

Implementing Dark Mode in React: CSS Variables, Tailwind, System Preference

Learn how to implement dark mode in React using CSS variables, Tailwind's dark class, and the prefers-color-scheme API - with no flash on reload.

Colorful design tokens and CSS variables displayed on a developer screen

2026-06-23 · 8 min read

Design Tokens in 2026: From Figma Variables to CSS Custom Properties

Design tokens bridge Figma variables and CSS custom properties - here's how to build a token pipeline that actually survives a design system at scale.

design tokenscss variables

colorful gradient code editor screen with CSS syntax highlighted

2026-06-19 · 8 min read

CSS Custom Properties: Dynamic Theming and Animation Tricks

CSS custom properties unlock dynamic theming, live animation control, and component-scoped design tokens - here's how to actually use them well in 2026.

css variablescustom properties

Developer writing CSS custom properties code on a dark monitor screen

2026-06-15 · 8 min read

CSS Custom Properties as a Design System: The Right Architecture

Build a scalable CSS custom properties architecture that powers real design systems - theming, tokens, component overrides, and dark mode without the mess.

css variablesdesign system

Developer writing code on a laptop with colorful CSS on screen

2026-06-13 · 8 min read

Tailwind Custom Colors: CSS Variables, OKLCH, and Design Tokens

Master Tailwind custom colors using CSS variables, OKLCH color space, and design tokens - build a scalable palette that survives dark mode, theming, and real production codebases.

tailwind colorscss variables

Free components in 41 visual styles

React & Tailwind, copy-paste ready. Glassmorphism, neobrutalism, Y2K and more.

Browse components →