Touch-first mobile screens

The problem

Desktop layouts shrunk to a phone put the main action in the top corner, the hardest place to reach with one hand. Small icon buttons get missed, centred dialogs cover the content with a tiny box, and a hamburger menu hides every section.

When to use it

Use it for

Screens people use on a phone, often one-handed: approvals, clocking in, requests.
Responsive web apps below the md breakpoint (768 px).

Not for

Desktop layouts: keep the Sidebar and page-level buttons.
Screens with several equally important actions: a FAB is for the one main action.

Anatomy

Top app barThe screen title and Back. One or two secondary actions at most.
ContentOne column, with 16 px side margins.
FABThe single main action, bottom-end, above the navigation bar.
Navigation bar3 to 5 labelled destinations at the bottom, within thumb reach.
SheetsBottomSheet for a short task or filters; ActionSheet for a list of actions.

How to build it

Put navigation at the bottom with a NavigationBar, not in a hamburger menu at the top.
Give the screen one main action, in a FAB or a full-width button at the bottom.
Make every touch target at least 44 by 44 px, with 8 px between targets.
Replace dialogs and menus with BottomSheet and ActionSheet.
Keep text inputs out of the bottom third, where the keyboard covers them; scroll the focused field into view.
Respect the safe areas at the top and bottom of the screen.

app.tsx

import { FAB, NavigationBar, NavItem, TopAppBar } from "@nexera-ui/react";
import { LuCalendar, LuHouse, LuPlus, LuUsers } from "react-icons/lu";

<TopAppBar title="Leave" />
<main className="px-4 pb-24">{/* content */}</main>
<FAB
  variant="extended"
  icon={<LuPlus />}
  className="fixed end-4 bottom-20"
  onPress={openNewRequest}
>
  New request
</FAB>
<NavigationBar aria-label="Main" className="fixed inset-x-0 bottom-0 md:hidden">
  <NavItem href="/" icon={<LuHouse />} label="Home" />
  <NavItem href="/leave" icon={<LuCalendar />} label="Leave" isCurrent />
  <NavItem href="/team" icon={<LuUsers />} label="Team" />
</NavigationBar>

Accessibility

Targets of 44 by 44 px or more meet WCAG 2.5.8 with room to spare, and help people with tremors.
Bottom navigation items keep their labels, so the icon is never the only clue.
Sheets trap focus and close with the system Back gesture or a visible Close.
Never disable zoom: people pinch to read small text.

Do and don't

DoPut navigation and the main action at the bottom, within thumb reach.

Don'tPut the only Save button in the top corner.

DoUse one FAB for the one main action.

Don'tStack three floating buttons in the corner.

DoUse a BottomSheet for filters and short tasks.

Don'tOpen a centred dialog that covers half the screen with a tiny box.