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

9 articles · #next.js

Abstract colorful gradient motion blur representing smooth animated page transitions

Page Transitions in Next.js App Router: View Transitions API

How to add smooth page transitions in Next.js App Router using the View Transitions API — no libraries, just native browser APIs and a bit of wiring.

page transitionsnext.js

Developer writing React code on a dark monitor setup

Next.js vs Remix in 2026: Which One Should You Use?

Next.js and Remix are both excellent React frameworks in 2026, but they make very different trade-offs. Here's how to actually pick between them.

Close-up of typographic letterforms on a designer's screen

Web Font Loading in 2026: next/font, variable fonts and CLS

Everything you need to know about web font loading in 2026 — next/font, variable fonts, CLS fixes, and why your layout still shifts at 3am.

web fontsfont loading

Developer writing React code on a dark-themed monitor setup

React Server Components Explained: What They Are and Why They Matter

React Server Components let you run React code on the server without shipping JS to the browser. Here's what that actually means for your Next.js app in 2026.

react server componentsnext.js

Developer writing Next.js code on a laptop in a dark workspace

Next.js App Router in 2026: What's Changed and What Still Trips People Up

Next.js App Router has matured significantly since 2023, but plenty of gotchas remain. Here's what's actually changed and where devs still get burned.

next.jsapp router

Developer writing Next.js code on a laptop with dark theme editor

Next.js Metadata API: The Right Way to Handle SEO in App Router

Stop hacking document.head — Next.js 13+ Metadata API handles Open Graph, Twitter Cards, and canonical URLs the right way. Here's the full breakdown.

next.jsmetadata

developer reviewing image optimisation code on a laptop screen

Next.js Image Optimisation: next/image Deep Dive — Every Prop Explained

Every prop in next/image explained with real code — from lazy loading and LCP priority to blur placeholders, remote patterns, and responsive sizes.

developer looking at server performance graphs on multiple monitors

Next.js Caching in 2026: fetch, ISR, Dynamic and No-Store Explained

Next.js caching is confusing — fetch defaults, ISR revalidation, dynamic rendering, and no-store all interact. Here's exactly how each layer works in 2026.

Developer writing Next.js server-side code on a dark-themed monitor

Next.js Server Actions in 2026: Forms, Mutations and the Right Patterns

Server Actions matured fast. Here's how forms, mutations, and optimistic updates actually work in Next.js 15+ — with patterns that don't fall apart under real traffic.

server actionsnext.js

Free components in 40 visual styles

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

Browse components →