Kairoz
.kairoz-tabbar-bottom

Mobile bottom tab bar

56px bottom navigation bar for mobile layouts. Five slots with 20px icons and 10px labels. Active tab uses brighter fill and heavier stroke weight.

.kairoz-tabbar-bottom.kairoz-tabbar-bottom-item.is-active

Isolated

The bar at actual size, outside a device frame, so every pixel of the design is visible.

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

Live -- Email client

Five-tab mail app: Inbox, Starred, Sent, Archive, Me. Tap to switch. The tab bar anchors the bottom while a compose button sits in the header.

Inbox
Vercel
12:42
Your deployment completed
kairoz-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
KAIROZ-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 player

Four-tab audio app: Listen, Search, Library, Liked. A now-playing row with progress and transport controls shows how the tab bar coexists with rich, layered 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