Atlas
.atlas-tabbar-bottom

Mobile bottom tab bar

Native-style bottom navigation. 5 tabs, 20px icons, 10px labels. Active tab brightens + icon stroke thickens.

.atlas-tabbar-bottom.atlas-tabbar-bottom-item.is-active

Standalone

The bar itself, rendered at real size without a device frame — so you can see the visual detail.

<nav class="atlas-tabbar-bottom">
  <button class="atlas-tabbar-bottom-item is-active">
    <svg>…</svg><span>Home</span>
  </button>
  <button class="atlas-tabbar-bottom-item">
    <svg>…</svg><span>Inbox</span>
  </button>
  <button class="atlas-tabbar-bottom-item">
    <svg>…</svg><span>Me</span>
  </button>
</nav>

Live — Email app

Five-tab email client: Inbox / Starred / Sent / Archive / Me. Tap the tabs to switch screens. Uses atlas-tabbar-bottom with a compose icon button in the header.

Inbox
Vercel
12:42
Your deployment completed
atlas-edge finished building in 1m 24s …
GitHub
11:08
PR #217 needs review
feat(cache): add tag-based invalidation …
Linear
09:50
3 new issues assigned
ATLAS-42 · AMOLED light-mode shadows too strong
Stripe
08:14
Invoice paid — $24,182.00
Receipt for November billing period …
Raycast
Wed
Weekly digest
Your top 5 commands this week …
Cursor
Tue
New agent mode available
Background agents can now run longer tasks

Live — Music app

Four-tab music player: Listen / Search / Library / Liked. Now-playing row with progress bar + transport controls demonstrates how the tab bar coexists with rich content.

Listen
Now playing
Weightless
Marconi Union
2:428:10
Made for you
Deep Focus
42 tracks · 2h 18m
Late Night Drive
28 tracks · 1h 44m
Ambient Mornings
61 tracks · 3h 22m
Terminal Sounds
19 tracks · 58m