D.108
clickpresslayoutmotion
Mobile Tab Bar
A bottom navigation bar with a sliding indicator, icon bounce, badge counts and an optional raised primary action.
Navigation & Menus · React / Motion / Tailwind
Mobile Patterns
Built for thumbs first.
On a phone, the interface is held in one hand and operated with one thumb. These components favour large targets, gestures with visible alternatives, and layouts that respect safe areas — while staying fully usable with a keyboard and a screen reader.
- B.39dragclickspringmotion
Bottom Sheet
A draggable modal sheet that snaps between heights with velocity, built on a native dialog.
Cards & Containers · React / Motion / Tailwind
- A.66dragpointerspringmotion
Swipe to Confirm
A slide-to-unlock control: drag the knob across the track to confirm, or step it there with the arrow keys.
Buttons & Controls · React / Motion / CSS / Tailwind
- F.115scrolldragscroll-linkedzero deps
Wheel Picker
An iOS-style drum picker: native scroll-snap momentum, a 3D cylinder per column, keyboard and typeahead.
Forms & Inputs · React / CSS / Tailwind
- A.94clickkeyboardspringmotion
Speed Dial
A floating action button that fans out into labelled actions with staggered springs, as a stack or an arc.
Buttons & Controls · React / Motion / Tailwind
- A.93clickkeyboardlayoutmotion
Segmented Control
A radio-group segmented control with a spring thumb, roving arrow keys, sizes and native form support.
Buttons & Controls · React / Motion / Tailwind
- F.24keyboardfocusspringmotion
Animated OTP Input
One-time-code entry with paste, SMS autofill, keyboard navigation and an error shake.
Forms & Inputs · React / Motion / Tailwind
- D.47clickkeyboardspringmotion
Dynamic Island
A pill that morphs between idle, compact and expanded live activities on a spring.
Navigation & Menus · React / Motion / Tailwind
- D.137clickkeyboardspringmotion
Scrollable Tabs
A tab strip for many tabs: edge fades and scroll buttons, a sliding indicator, wheel-to-horizontal scrolling and closable tabs.
Navigation & Menus · React / Motion / Tailwind
- D.138scrollfocusscroll-linkedmotion
Auto-Hide Header
A sticky header that slides away as you scroll down and springs back the moment you scroll up.
Navigation & Menus · React / Motion / Tailwind
- D.136clickkeyboardspringmotion
Expanding Search
A search icon that springs open into a full field with recent searches, suggestions and a / shortcut.
Navigation & Menus · React / Motion / Tailwind
- D.166scrolldragscroll-linkedzero deps
Swipe Tabs
Mobile tabs with side-by-side panels on native scroll-snap and an indicator that tracks the swipe continuously.
Navigation & Menus · React / CSS / Tailwind
- D.167dragpointertweenzero deps
Alphabet Index
An A–Z scrubber beside a long grouped list: drag to jump with a letter bubble, sticky headers, locale-aware sorting.
Navigation & Menus · React / Tailwind
- B.160dragclickspringmotion
Side Drawer
A left or right panel on a native dialog: modal overlay or non-modal push, with velocity drag-to-close.
Cards & Containers · React / Motion / Tailwind
- B.187dragclickspringmotion
Swipe Actions
List rows that reveal actions when swiped, with full-swipe triggers and an accessible Actions menu on every row.
Cards & Containers · React / Motion / Tailwind
- D.195dragscrollspringmotion
Pull to Refresh
Pull a scroll container down at the top to refresh: rubber-band resistance, a filling ring, a spinner and a Refresh button.
Navigation & Menus · React / Motion / SVG / Tailwind
- B.189clickpresstweenmotion
Story Viewer
A stories viewer with segmented progress, tap and hold gestures, a cube turn between people and a native <dialog> modal.
Cards & Containers · React / Motion / Tailwind
- A.183clickpressspringmotion
PIN Pad
A tactile numeric keypad for PIN entry with spring-filled dots, error shake and keyboard support.
Buttons & Controls · React / Motion / SVG / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVG
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Mobile Tab Bar documentation
- Bottom Sheet documentation
- Swipe to Confirm documentation
- Wheel Picker documentation
- Speed Dial documentation
- Segmented Control documentation
- Animated OTP Input documentation
- Dynamic Island documentation
- Scrollable Tabs documentation
- Auto-Hide Header documentation
- Expanding Search documentation
- Swipe Tabs documentation
- Alphabet Index documentation
- Side Drawer documentation
- Swipe Actions documentation
- Pull to Refresh documentation
- Story Viewer documentation
- PIN Pad documentation