Mobile dock shell
A mobile-first finance shell with summary content and a floating navigation dock.
Preview
Today
Live$482.40
Collected$2,184
North Pier Ops
Autopay succeeded
Harbor Studio
Receipt waiting
Ingredients
The recipe only uses documented Axie primitives.
Mobile DockStatProgressList RowBadge
Accessibility
- Keep the dock in a nav landmark with labels for every icon-only item.
- Use a raised center action only when it is the most common mobile task.
- Leave enough safe-area spacing so the dock does not cover page content.
Code
code
<MobileDock action={{ icon: <PlusIcon />, label: "Add item" }} defaultValue="stats" items={items} position="static"/>