The Empire UI blog

2026-08-29 · 8 min read

Mobile Navigation in Tailwind: Bottom Bar, Drawer, Hamburger

Three mobile nav patterns - bottom tab bar, slide-out drawer, hamburger menu - built entirely with Tailwind CSS and React. No extra libraries needed.

Read →

2026-08-29 · 9 min read

Admin Dashboard in Tailwind: Full Layout With Charts and Tables

Build a production-ready admin dashboard with Tailwind CSS - sidebar nav, stat cards, Recharts data viz, and sortable tables in one clean layout.

Read →

2026-08-28 · 8 min read

Portfolio Layout in Tailwind: Grid, Project Cards, About Section

Build a polished developer portfolio with Tailwind CSS - responsive project grid, animated cards, and an about section that doesn't look like every other dev site.

Read →

2026-08-28 · 9 min read

SaaS Marketing Page in Tailwind: Hero, Features, Pricing, FAQ

Build a complete SaaS marketing page with Tailwind CSS - hero, features grid, pricing table, and FAQ accordion. Real code, real patterns, no fluff.

Read →

2026-08-27 · 8 min read

Blog Layout in Tailwind: Article Page, Card Grid, Sidebar

Build a full blog layout in Tailwind - article page with typography, responsive card grid, and a sticky sidebar - with copy-paste Next.js code.

Read →

2026-08-27 · 9 min read

E-Commerce Product Page in Tailwind: Gallery, Options, CTA

Build a production-ready e-commerce product page with Tailwind CSS - image gallery, variant selectors, sticky CTA, and mobile layout that actually converts.

Read →

2026-08-26 · 9 min read

Supabase + React in 2026: Auth, Realtime, Storage From Scratch

Wire up Supabase auth, realtime subscriptions, and file storage into a React app from zero - no hand-waving, just code that actually runs.

Read →

2026-08-26 · 8 min read

Auth Pages in Tailwind: Login, Register, Forgot Password

Build polished login, register, and forgot-password pages with Tailwind CSS - real code, real patterns, and zero UI library bloat required.

Read →

2026-08-25 · 9 min read

Drag-and-Drop Kanban in React: dnd-kit Full Implementation

Build a fully working drag-and-drop Kanban board in React with dnd-kit - columns, cards, sorting, and keyboard support all covered from scratch.

Read →

2026-08-25 · 9 min read

PDF Generation in React: react-pdf, Puppeteer and @react-pdf/renderer

Compare react-pdf, @react-pdf/renderer, and Puppeteer for generating PDFs in React apps - with real code, honest tradeoffs, and when to use each.

Read →

2026-08-24 · 9 min read

QR Code Scanner in React: Camera Access, Decode, Error Handling

Build a real QR code scanner in React using the MediaStream API and ZXing - camera access, live decode, error states, and mobile gotchas covered.

Read →

2026-08-24 · 8 min read

Next.js API Routes vs Route Handlers: When to Use Which in 2026

API Routes are dead in the App Router - but when should you actually switch to Route Handlers? A practical breakdown for Next.js developers in 2026.

Read →

2026-08-23 · 8 min read

React Email: Building HTML Emails With React Components

React Email lets you build HTML emails with real React components - no table soup, no inline CSS hell. Here's how to set it up and ship emails that actually render.

Read →

2026-08-23 · 8 min read

Analytics in Next.js: Vercel Analytics, PostHog, Plausible Setup

Set up Vercel Analytics, PostHog, and Plausible in Next.js 14+ the right way - no bloat, no cookie banners where you don't need them, real data.

Read →

2026-08-22 · 9 min read

WebSockets in React: Real-Time Chat, Notifications, Live Data

Ship real-time chat, live notifications, and streaming data in React using raw WebSockets and Socket.io - with code you can actually use today.

Read →

2026-08-22 · 9 min read

Stripe Integration in React + Next.js: Checkout, Webhooks, Subscriptions

Ship real payments in Next.js: Stripe Checkout, webhook verification, and subscription billing with the App Router - no fluff, just working code.

Read →

2026-08-21 · 9 min read

File-Based Routing in React: Next.js App Router vs TanStack Router

A practical breakdown of Next.js App Router and TanStack Router - how file-based routing works in each, where they differ, and which one fits your project.

Read →

2026-08-21 · 9 min read

Deploying Next.js in 2026: Vercel, Docker, VPS Compared

Vercel, Docker, or a bare VPS? In 2026, the right Next.js deployment choice depends on your traffic, budget, and how much ops pain you're willing to accept.

Read →

2026-08-20 · 9 min read

React Monorepo With Turborepo: Shared Components, Configs, Packages

Set up a React monorepo with Turborepo - share UI components, ESLint configs, TypeScript settings, and design tokens across every app without duplicating code.

Read →

2026-08-20 · 8 min read

React Design Patterns in 2026: What Still Works, What to Drop

A practical 2026 audit of React design patterns - what's aged well, what's quietly rotting your codebase, and what to reach for instead.

Read →

2026-08-19 · 8 min read

React Performance Profiler: Finding and Fixing Slow Components

Learn how to use the React DevTools Profiler to pinpoint slow renders, fix wasted re-renders, and ship snappy UIs - with real code examples and actionable fixes.

Read →

2026-08-19 · 8 min read

URL State in React: nuqs, useSearchParams and the Right Patterns

Stop losing filter state on reload. Learn how to sync React state to the URL with nuqs, useSearchParams, and patterns that actually hold up in production.

Read →

2026-08-18 · 9 min read

React Internationalisation (i18n): next-intl, react-i18next in 2026

A practical comparison of next-intl and react-i18next for React apps in 2026 - routing, pluralisation, ICU, and when to pick each one.

Read →

2026-08-18 · 8 min read

React Data Fetching Patterns in 2026: Server, Client, Cache

Server Components, TanStack Query, Next.js cache - React data fetching has never been more powerful or more confusing. Here's how to pick the right pattern.

Read →

2026-08-17 · 9 min read

Next.js SEO in 2026: Metadata, sitemap.ts, JSON-LD and OG Images

A practical guide to wiring up Next.js SEO in 2026 - metadata API, sitemap.ts, JSON-LD structured data, and dynamic OG image generation with zero guesswork.

Read →

2026-08-17 · 9 min read

Progressive Web Apps with React and Next.js in 2026

Build installable, offline-ready PWAs with React and Next.js in 2026 - service workers, Web App Manifest, caching strategies, and push notifications covered end-to-end.

Read →

2026-08-16 · 9 min read

Authentication in Next.js 2026: NextAuth v5, Clerk, Better Auth

NextAuth v5, Clerk, and Better Auth are the three auth options worth your time in 2026. Here's how each one works in the App Router - and which to actually pick.

Read →

2026-08-16 · 9 min read

React Forms With Server Actions: Validation, Pending State, Optimistic UI

Build React forms with Next.js Server Actions, Zod validation, useFormStatus pending states, and optimistic UI updates - no API routes needed.

Read →

2026-08-15 · 9 min read

Glassmorphism Onboarding UI: Multi-Step Wizard With Frosted Steps

Build a multi-step onboarding wizard with frosted-glass steps in React - smooth transitions, accessible progress, and real Tailwind code you can ship today.

Read →

2026-08-15 · 8 min read

Next.js OG Image Generation: @vercel/og, Edge Runtime, Custom Fonts

Generate dynamic Open Graph images in Next.js 14+ using @vercel/og on the Edge Runtime - custom fonts, JSX templates, and zero cold starts explained.

Read →

2026-08-14 · 9 min read

SaaS Pricing Page Design: Psychology, Layout and Toggle Tricks

How to design a SaaS pricing page that actually converts - toggle psychology, tier anchoring, layout patterns, and React implementation tricks that work in 2026.

Read →

2026-08-14 · 8 min read

Animated Number Counter in React: Stats That Count Up on Scroll

Build a scroll-triggered animated number counter in React using Intersection Observer - no library needed, just clean hooks and requestAnimationFrame.

Read →

2026-08-13 · 9 min read

Portfolio Hero Section Designs: 7 Layouts for Developers in 2026

Seven opinionated hero section layouts for developer portfolios in 2026 - with React code, real CSS values, and honest takes on what actually converts.

Read →

2026-08-13 · 8 min read

Glassmorphism Blog Layout: Frosted Article Cards and Reading View

Build a frosted-glass blog layout in React and Next.js - article grid cards, single-post reading view, and the backdrop-filter tricks that make it feel real.

Read →

2026-08-12 · 8 min read

Glassmorphism Tooltip: Frosted-Glass Floating Labels in React

Build frosted-glass tooltips in React with backdrop-filter blur, CSS variables, and accessible ARIA attributes - no third-party tooltip library needed.

Read →

2026-08-12 · 8 min read

CSS Visual Effects in 2026: mix-blend-mode, isolation, filter Stacks

Master CSS visual effects in 2026 - mix-blend-mode, isolation stacking contexts, and chained filter() combos that ship without a single line of JS.

Read →

2026-08-11 · 8 min read

UI Microinteractions in 2026: The Small Details That Make Users Stay

Microinteractions are the silent persuaders of good UX. Learn how to build the hover states, transitions, and feedback loops that keep users engaged in 2026.

Read →

2026-08-11 · 9 min read

Card Hover Effects in CSS: 12 Patterns From Subtle to Dramatic

12 card hover effects from barely-there lifts to full 3D flips - with copy-paste CSS, pitfalls to dodge, and when to actually use each one.

Read →

2026-08-10 · 9 min read

Text Gradient Effects in CSS: 8 Techniques Beyond bg-clip-text

bg-clip-text is fine, but it's just the start. Here are 8 CSS text gradient techniques that actually push typography into something worth looking at.

Read →

2026-08-10 · 8 min read

Scroll Progress Indicator in React: Bar, Circle and Sidebar Dots

Build a scroll progress bar, circular ring, and sidebar dot indicator in React using useRef and scroll events - no library needed.

Read →

2026-08-09 · 8 min read

Bento Grid SaaS Landing Page: Feature Showcase in 2026 Style

Learn how to build a bento grid feature section for your SaaS landing page with React and Tailwind in 2026 - the layout pattern every top product is copying.

Read →

2026-08-09 · 8 min read

Glassmorphism Charts in React: Recharts With Frosted Glass Style

Style Recharts bar, line, and area charts with frosted glass CSS in React - custom tooltips, glass containers, and dashboard layouts that actually look good.

Read →

2026-08-08 · 8 min read

Neumorphism Dashboard: Soft UI Admin Panels That Work

Build neumorphism admin dashboards that look stunning and stay accessible - real CSS, real React patterns, zero fake depth tricks.

Read →

2026-08-08 · 8 min read

Liquid Glass Effect in CSS: iOS 26-Style Morphing Surfaces

Build iOS 26-style liquid glass surfaces in pure CSS - backdrop-filter, SVG turbulence distortion, and morphing animations, no canvas required.

Read →

2026-08-07 · 8 min read

Minimalist Web Design in 2026: Less Is More, Done Right

Minimalism in 2026 isn't just about removing things - it's about radical clarity. Here's how to build interfaces that breathe without feeling empty.

Read →

2026-08-07 · 8 min read

Glassmorphism E-Commerce: Product Pages with Frosted Glass Cards

Build e-commerce product pages with frosted glass cards in React and Tailwind - layout patterns, add-to-cart UX, and performance tips that actually work.

Read →

2026-08-06 · 8 min read

Brutalism Portfolio Design: Raw, Bold, Impossible to Ignore

Brutalist portfolios break every "good design" rule on purpose - thick borders, clashing type, zero subtlety. Here's how to build one that lands clients.

Read →

2026-08-06 · 8 min read

Glassmorphism SaaS UI: Frosted Dashboard, Cards and Charts

Build a production-ready glassmorphism SaaS dashboard with frosted cards, KPI tiles, and chart wrappers using React and Tailwind CSS.

Read →