The Empire UI blog

2026-09-22 · 8 min read

Feedback Widget in React: Thumbs, Star Rating, Free Text

Build a production-ready React feedback widget with thumbs up/down, star ratings, and free text - all in under 120 lines, no extra dependencies required.

Read →

2026-09-21 · 8 min read

Keyboard Shortcut Display in React: ⌘K Badges, Legend, Cheatsheet

Build polished ⌘K badges, shortcut legends, and cheatsheet overlays in React - with accessible markup, Tailwind styling, and real keyboard event wiring.

Read →

2026-09-20 · 9 min read

Language Switcher in React: Dropdown, Flag Icons, i18n Routing

Build a polished language switcher in React with flag icons, i18n routing, and next-intl. Dropdown variants, RTL support, and URL-based locale switching covered.

Read →

2026-09-20 · 8 min read

Social Share Buttons in React: Twitter, LinkedIn, Copy Link

Build Twitter, LinkedIn, and copy-link share buttons in React from scratch - no bloated libraries, just clean components with real UX polish.

Read →

2026-09-19 · 9 min read

Live Chat Widget in React: Bubble Button, Message Window, Typing

Build a fully interactive live chat widget in React - bubble button, message window, typing indicator, and smooth animations. No third-party SDK required.

Read →

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.

Read →

2026-09-18 · 8 min read

Newsletter Signup in React: Form, Success State, Email Validation

Build a polished React newsletter signup form with email validation, success state, and loading UX - no library required. Copy-paste ready in 2026.

Read →

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.

Read →

2026-09-17 · 8 min read

Error Page Design in React: 404, 500, Maintenance Mode

Build polished 404, 500, and maintenance-mode pages in React and Next.js - with real component code, design patterns, and UI tips that don't look like defaults.

Read →

2026-09-17 · 9 min read

Survey Form in React: Multi-Step, Progress, Scale and Multiple Choice

Build a polished React survey form with multi-step flow, progress bar, Likert scales, and multiple choice - complete with state management and validation.

Read →

2026-09-16 · 9 min read

Video Player in React: Custom Controls, Fullscreen, Captions

Build a fully custom React video player with play/pause, seek, fullscreen, volume, and WebVTT captions - no third-party libraries required.

Read →

2026-09-16 · 8 min read

Cookie Consent Banner in React: GDPR, Animate In/Out, Store Prefs

Build a GDPR-compliant cookie consent banner in React with smooth slide animations, localStorage persistence, and granular category toggles. No bloated libraries.

Read →

2026-09-15 · 9 min read

Address Form in React: Country Select, Postcode Validation, Autofill

Build a production-ready address form in React with dynamic country select, per-country postcode validation, and browser autofill that actually works.

Read →

2026-09-15 · 8 min read

Settings Page in React: Tabs, Toggle Groups, Save Confirmation

Build a production-ready settings page in React with tabbed navigation, toggle groups, and a save confirmation pattern that actually feels right to users.

Read →

2026-09-14 · 9 min read

Analytics Dashboard in React: Charts, KPIs, Date Range Picker

Build a production-ready analytics dashboard in React with recharts, KPI cards, and a date range picker - from data wiring to responsive layout in one guide.

Read →

2026-09-14 · 8 min read

User Profile Card in React: Avatar, Stats, Follow Button, Bio

Build a polished React user profile card with avatar, bio, stats counter, and a follow button. Fully typed, accessible, and ready to drop in.

Read →

2026-09-13 · 9 min read

Billing Page in React: Plan Selector, Invoice Table, Card Update

Build a production-ready billing page in React with a plan selector, invoice history table, and card update flow. Stripe-connected, fully typed.

Read →

2026-09-13 · 9 min read

Activity Feed in React: Timeline, Filters, Infinite Load

Build a full activity feed in React with a timeline layout, type filters, and infinite scroll - no library magic, just composable hooks and clean state.

Read →

2026-09-12 · 9 min read

Shopping Cart UI in React: Slide-Over Drawer, Quantity, Promo Code

Build a full shopping cart UI in React - slide-over drawer, quantity stepper, promo code input, and animated item removal - with Tailwind CSS and Framer Motion.

Read →

2026-09-12 · 8 min read

Team Members UI in React: Invite, Role Select, Remove Member

Build a full team members UI in React - invite by email, pick a role, remove members - with real code and no-fluff patterns for SaaS dashboards.

Read →

2026-09-11 · 9 min read

Product Image Gallery in React: Zoom, Thumbnails, Touch Swipe

Build a production-ready product image gallery in React with pinch-to-zoom, thumbnail strip, and touch swipe - no heavy library required.

Read →

2026-09-10 · 9 min read

Checkout Form in React: Address, Payment, Review Steps with Validation

Build a multi-step checkout form in React with address, payment, and review stages - complete with Zod validation, Stripe-ready fields, and clean UX patterns.

Read →

2026-09-10 · 8 min read

Review and Rating Component in React: Stars, Average, Breakdown

Build a full review and rating system in React - interactive stars, score average, histogram breakdown, and accessible markup. No libraries needed.

Read →

2026-09-09 · 9 min read

Scroll Reveal Animation in React: AOS vs Framer Motion vs Intersection Observer

AOS, Framer Motion, or raw Intersection Observer - which actually belongs in your React project? A practical breakdown with real code and honest trade-offs.

Read →

2026-09-08 · 9 min read

Page Load Animation in React: First Paint, Stagger, Skeleton to Content

How to handle page load animations in React - from first paint flicker to skeleton-to-content transitions and stagger sequences that don't tank performance.

Read →

2026-09-07 · 8 min read

Confetti in React 2026: canvas-confetti, tsParticles and Pure CSS

Three real approaches to confetti in React - canvas-confetti, tsParticles, and zero-dependency CSS - with working code, bundle cost breakdowns, and when to use each.

Read →

2026-09-04 · 8 min read

Timeline Component in Tailwind: Vertical, Alternating, Compact

Build vertical, alternating, and compact timeline components with Tailwind CSS - no extra libraries, just utility classes and clean React patterns.

Read →

2026-09-03 · 8 min read

Alert and Callout Components in Tailwind: Info, Warning, Error, Success

Build production-ready alert and callout components in Tailwind CSS - info, warning, error, and success variants with icons, dismiss logic, and accessibility.

Read →

2026-09-01 · 8 min read

Avatar and Avatar Group in Tailwind: Initials, Stack, Count Badge

Build stacked avatar groups with Tailwind CSS - initials fallback, overlap rings, and count badges. No library needed, just utility classes and React.

Read →

2026-08-30 · 8 min read

Progress Bar in Tailwind: Animated, Striped, Segmented Variants

Build animated, striped, and segmented progress bars with pure Tailwind CSS and React. No plugins needed - just utility classes and a bit of JavaScript.

Read →

2026-08-30 · 8 min read

Button Component Variants in Tailwind: Primary, Ghost, Icon, Loading

Build a production-ready button system in Tailwind CSS - primary, ghost, icon, and loading variants with React, TypeScript, and class-variance-authority.

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 · 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-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-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-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-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-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

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 →