Phones and touch
The stylesheet makes every component feel native on phones and correct with a mouse.
Viewport
Let the page reach behind the notch and the home indicator; components keep their content clear of them.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Built in
- No tap flash. No grey box when you tap, and no stuck hover after a tap.
- Pressed feedback. Buttons, tabs and list items dim or shrink slightly while pressed.
- Finger-sized targets. Small buttons get a 44px touch area without changing the layout.
- No zoom on focus. Fields use 16px text, so iPhone doesn't zoom in.
Phone patterns
| Component | What it does |
|---|---|
BottomNav | The tab bar: 3 to 5 tabs above the home indicator. |
Sheet | Bottom sheets with swipe to close and snap points. |
PushLayout | A side menu that slides the whole app aside. |
useHideOnScroll | Hides bars while scrolling down and brings them back on scroll up. |
useSystemBars | The phone's status bar follows the page and dims with open sheets. |