React mobile UI components for Tailwind CSS
The Mobile category brings native phone patterns to the web, for PWAs and mobile-first sites. Bottom Tab Bar is the primary navigation at the thumb, with badges, a raised center action and hide on scroll. Large Title Header and Hero Header reproduce the iOS large title and the full-bleed photo header of a detail page, and FAB and Sticky CTA Bar keep the main action in reach. Action Sheet, Notification Banner and Install Prompt follow iOS conventions for choices, incoming messages and adding the app to the home screen.
All Mobile[15]
Hero Header
The photo header of a phone detail page: a full-bleed image under the status bar with round glass buttons, parallax and a handover to a bar.
Bottom Tab Bar
The phone's primary navigation: 3 to 5 tabs at the thumb with an animated pill, badges, a raised center action and hide on scroll.
Sticky CTA Bar
The bottom action bar of product, listing and checkout pages on phones: the price on one side, the main action on the other.
Slide To Confirm
A track whose thumb you slide to the end to confirm an irreversible action, like a payment or a delivery, with loading and success states.
Action Sheet
The iOS action sheet: a short list of actions about one thing, with a title, red destructive rows and a separate Cancel, plus await show().
FAB
The floating action button for a phone screen's main action, with a labelled or radial speed dial and a label that folds while you scroll.
Haptic Button
A button that answers like a native control: spring press, touch ripple, a haptic tick, a long-press action and a hold-to-confirm mode.
Install Prompt
Invites people to install the web app: the browser's install dialog in Chrome and Edge, an Add to Home Screen guide on iPhone and Mac.
Large Title Header
An iOS large title that scrolls with the page and hands over to a compact title in a glass bar, with back, actions and search.
Notification Banner
iOS-style banners for incoming messages, orders and reminders that drop from the top, one at a time, with a queue and an expanded view.
Onboarding Carousel
First-run slides for an app or a PWA: swipe or tap Next, watch the dots, Skip any time, Get started on the last slide.
Picker Wheel
The iOS wheel picker for the web: columns that spin with native momentum and click into place on a 3D cylinder, inline or as a field.
Pull To Refresh
Pull a list down past its top to reload it, with rubberband resistance, an arrow, iOS spokes or a Material ring, and a haptic tick.
Guides
Tutorials and guides from the blog that use these components.
Comparisons and alternatives
Best React Component Library for Mobile in 2026: 9 Compared
The best React component library for mobile web apps in 2026: 9 libraries checked at 390px for bottom sheets, touch targets, safe areas and gestures.
12 min read
Mobile UI in React
Minimum Touch Target Size: WCAG, iOS, Android and Tailwind
Minimum touch target size per WCAG 2.2 (24 and 44px), iOS (44pt) and Android (48dp), and how to get 44px taps in React and Tailwind without desktop bloat.
11 min read
Mobile UI in React
Mobile-First React Components: 9 Rules With Code
Mobile-first React components, rule by rule: bottom sheets instead of popovers, 44px touch targets, safe areas, dvh, keyboard-aware bars and tables as cards.
20 min read
Mobile UI in React
React Bottom Navigation Bar in Next.js: Safe Areas, Badges
Build a React bottom navigation bar in Next.js: 3 to 5 link tabs, safe areas, badges screen readers announce, hide on scroll, and when a sidebar fits better.
8 min read
Mobile UI in React
React Bottom Sheet for the Web: Snap Points, Drag, Keyboard
Build a React bottom sheet for the web on vaul: snap points, drag to dismiss, nested sheets, the on-screen keyboard and the home indicator, with working code.
9 min read
Mobile UI in React
React Pull to Refresh in a PWA Without Fighting the Browser
Build a React pull to refresh for a PWA: overscroll-behavior, rubberband resistance, iOS spokes or a Material ring, a haptic tick and a refresh button.
11 min read
About Mobile
For gestures there are Pull To Refresh, Swipe Deck, Swipeable Tabs, Slide To Confirm and Picker Wheel, which spins with the phone's own momentum. Haptic Button answers with a spring press, a touch ripple and a haptic tick, and Onboarding Carousel runs the first-run slides of an app. The gestures follow the finger while a vertical scroll still moves the page, haptic ticks fire where the browser supports them, and bars pinned to the screen edge respect the safe-area insets. All 15 mobile components are part of Pro. Their docs, props and live previews are open to everyone.