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:
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.
Top comments (0)