TabBar

iOS-style bottom tab bar for primary navigation between views.

Default

Five tabs with icons and labels. Active tab uses primary color.

html 
<div class="uc-border-t uc-bg-neutrals-surface/80 uc-backdrop-blur-md">
  <div class="uc-flex uc-items-center uc-justify-around uc-py-1">
    <button class="tab active">Home</button>
    <button class="tab">Search</button>
    <button class="tab">Profile</button>
  </div>
</div>

With Badge

Notification badges on tabs to indicate unread content.

html 
<div class="uc-border-t uc-bg-neutrals-surface/80 uc-backdrop-blur-md">
  <div class="uc-flex uc-items-center uc-justify-around uc-py-1">
    <button class="uc-flex uc-flex-col uc-items-center uc-gap-0.5 uc-py-1 uc-px-3">
      <svg class="uc-w-6 uc-h-6 uc-text-accents-blue">...</svg>
      <span class="uc-text-[10px] uc-text-accents-blue">Home</span>
    </button>
    <button class="uc-flex uc-flex-col uc-items-center uc-gap-0.5 uc-py-1 uc-px-3 uc-relative">
      <div class="uc-relative">
        <svg class="uc-w-6 uc-h-6">...</svg>
        <span class="uc-absolute uc--top-1.5 uc--right-2 uc-h-4 uc-min-w-[16px] uc-px-1 uc-text-[10px] uc-font-bold uc-text-white uc-bg-accents-red uc-rounded-full">3</span>
      </div>
      <span class="uc-text-[10px]">Messages</span>
    </button>
  </div>
</div>

Without Labels

Icon-only tab bar for a more compact appearance.

html 
<div class="uc-border-t uc-bg-neutrals-surface/80 uc-backdrop-blur-md">
  <div class="uc-flex uc-items-center uc-justify-around uc-py-2">
    <button class="uc-h-10 uc-w-10 uc-rounded-lg">
      <svg class="uc-w-6 uc-h-6 uc-text-accents-blue">...</svg>
    </button>
    <button class="uc-h-10 uc-w-10 uc-rounded-lg">
      <svg class="uc-w-6 uc-h-6 uc-text-fg-disabled">...</svg>
    </button>
    <button class="uc-h-10 uc-w-10 uc-rounded-lg">
      <svg class="uc-w-6 uc-h-6 uc-text-fg-disabled">...</svg>
    </button>
  </div>
</div>

Floating Style

Rounded pill-shaped tab bar floating above content.

html 
<div class="uc-relative uc-min-h-[200px]">
  <div class="uc-absolute uc-bottom-4 uc-left-1/2 uc--translate-x-1/2">
    <div class="uc-flex uc-items-center uc-gap-1 uc-px-2 uc-py-1.5 uc-rounded-full uc-border uc-bg-neutrals-surface/90 uc-backdrop-blur-md uc-shadow-lg">
      <button class="uc-h-10 uc-px-4 uc-rounded-full uc-bg-accents-blue uc-text-constant-white uc-gap-2">
        <svg class="uc-w-5 uc-h-5">...</svg>
        <span class="uc-text-xs uc-font-medium">Home</span>
      </button>
      <button class="uc-h-10 uc-w-10 uc-rounded-full">
        <svg class="uc-w-5 uc-h-5">...</svg>
      </button>
    </div>
  </div>
</div>

API Reference

All CSS classes available for the TabBar component.

Class Type Description
uc-border-t uc-border-border-default Base Top border separating tab bar from content
uc-bg-neutrals-surface/80 uc-backdrop-blur-md Base Translucent blurred background for tab bar
uc-flex uc-items-center uc-justify-around Layout Evenly distributes tabs across the bar
uc-text-accents-blue State Active tab icon and label color
uc-text-fg-disabled State Inactive tab icon and label color
uc-text-[10px] uc-font-medium Typography Tab label text styling
uc-w-6 uc-h-6 Icon Default tab icon size (24px)
uc-bg-accents-red uc-rounded-full Badge Notification badge on tab icon
uc-rounded-full uc-bg-accents-blue uc-text-constant-white Floating Active tab pill in floating style
uc-shadow-lg uc-bg-neutrals-surface/90 Floating Floating tab bar container with shadow

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="tablist" on the tab bar container
Tabs Each tab uses role="tab" with aria-selected on the active one
Keyboard Arrow keys navigate tabs, Tab moves to panel content
Panels Tab panels use role="tabpanel" linked via aria-labelledby