197 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

4 articles · #radix ui

Code editor open showing React component dialog code on screen

React Modal / Dialog: Headless UI, Radix UI and the Vanilla Way

Headless UI vs Radix UI vs rolling your own React modal — here's what actually matters, with real code and honest trade-offs for 2026.

Developer writing React component code on a laptop screen

Dropdown Menu in React: Accessible, Animated, Keyboard-Ready

Build a fully accessible, animated React dropdown menu with keyboard navigation, ARIA roles, and smooth CSS transitions — without sacrificing DX or bundle size.

Developer working on a React component UI on a laptop screen

Tooltip in React: Floating-UI, Radix and Pure CSS Approaches

Three real approaches to React tooltips — pure CSS, Radix UI, and Floating-UI — with code, a11y gotchas, and when to reach for each one.

Abstract colorful accordion-like folded layers representing UI component animation

Accordion in React: Radix vs Custom — Animated Height Transitions

Radix UI accordion vs rolling your own in React — animated height transitions, keyboard nav, and when each approach actually makes sense in 2026.

Free components in 40 visual styles

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

Browse components →