From Mobile UX Expectations to Better Tabs on the Web

Maicon Gilton de Souza Freire — Sat, 20 Dec 2025 06:30:42 +0000

Recently, I was building an admin dashboard with several screens using tab-based navigation.

During my 7 years of experience, I’ve implemented tabs in multiple projects — but almost every tab solution I tried had the same issues:

❌ Tabs simply mount/unmount components on change
❌ No transitions, no continuity — just abrupt UI jumps
❌ Components re-mounted every time → unnecessary API calls
❌ Lost local state (filters, scroll position, UI context)

FFrom a UI/UX and performance perspective, it always felt wrong.

After working on several React Native and SwiftUI projects, I kept thinking:

"Why can’t tabs on the web behave like the ones we use on mobile?"

I didn’t want tabs that just switch views. I wanted tabs that preserve state, feel intentional, and respect the user’s context.

My focus was on:

avoiding unnecessary mount/unmount cycles
keeping each tab’s state alive
smooth, interruptible transitions
performance-first behavior
zero styling assumptions

So I built one focused on real 1:1 touch interactions:

✨ react-fluid-tabs

A lightweight, high-performance React tabs component with native-like swipe behavior.

Highlights:
👆 Real-time swipe tracking with velocity & resistance
⚡ 60fps animations using hardware-accelerated transforms
♿ Fully accessible (WAI-ARIA compliant)
🎨 Headless & fully customizable
📦 Tiny bundle, no dependencies

Mobile-friendly gestures weren’t a requirement at first — but once the foundation was right, it naturally evolved into a more complete and unique tab experience for React / Next.js users.

I’ve open-sourced it and plan to keep extending it — including support beyond React in the future.

So, if you are working in complex dashboards and admin panels, data-heavy UIs where state should persist, mobile-first or touch-friendly web apps and teams that care about UX continuity and performance, git it a try, I’d really love your feedback.

🔗 Repo & Docs

react #nextjs #frontend #opensource #ui #ux #webperformance #javascript

DEV Community: Maicon Gilton de Souza Freire

From Mobile UX Expectations to Better Tabs on the Web

react #nextjs #frontend #opensource #ui #ux #webperformance #javascript