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

7 articles · #svg · showing 1-7

Colorful abstract geometric illustration representing empty UI states in React

2026-09-18 · 8 min read

Empty State With Illustrations in React: SVG, Lottie and CSS Art

Build empty states that feel designed - not forgotten. SVG inline art, Lottie animations, and pure-CSS illustration techniques for React UIs.

empty stateillustration

Flowing blue ocean wave captured in slow motion photography

2026-09-09 · 9 min read

CSS Wave Animation: SVG, clip-path and Keyframe Techniques

Master CSS wave animations with three battle-tested techniques - SVG paths, clip-path keyframes, and pseudo-elements - plus real code you can ship today.

wave animationcss

colorful abstract SVG vector paths glowing on dark digital background

2026-07-29 · 9 min read

Advanced SVG Animation: stroke-dasharray, SMIL and JavaScript Sync

Master SVG animation with stroke-dasharray path tricks, SMIL declarative timing, and JavaScript sync for precise, performant motion that CSS alone can't do.

Developer inspecting SVG code in browser devtools accessibility panel

2026-07-26 · 8 min read

SVG Icon Accessibility: aria-label, role and title Explained Properly

Stop guessing which ARIA attributes to put on your SVG icons. Here's exactly when to use aria-label, role, title and aria-hidden - with React examples.

Abstract geometric shapes morphing between colorful fluid CSS animations

2026-07-20 · 8 min read

CSS Shape Morphing: clip-path, offset-path and SVG Morph Techniques

Master CSS shape morphing with clip-path animations, offset-path motion trails, and SVG SMIL morphing - with real code examples and browser gotchas explained.

abstract colorful motion blur graphic representing javascript animation

2026-07-20 · 9 min read

Anime.js v4 in 2026: Timeline, Stagger and SVG Animations

Anime.js v4 rewrote the timeline and stagger APIs completely. Here's how to actually use them in 2026 - with real SVG, scroll, and sequencing examples.

anime.jsanimation

React icon system components displayed on a developer screen

2026-06-20 · 7 min read

Icon System in React: lucide-react, Heroicons and Custom SVGs

Pick the right icon library for your React app in 2026 - lucide-react, Heroicons, or roll your own SVG system. Here's how each one holds up.

Free components in 41 visual styles

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

Browse components →