Logo

Liquid Glass

Components/Glass Tab Bar

Glass Tab Bar

A pill-style navigation switcher with animated indicator and glass effect.

Choose theme
GlassTabBar.tsx
<!-- Dark Theme Switcher -->
<div class="relative flex items-center gap-2 w-[244px] h-[70px] px-3 py-2 rounded-full bg-[#bbbbbc1f] backdrop-blur-[8px] backdrop-saturate-150 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03),inset_1.8px_3px_0_-2px_rgba(255,255,255,0.27),inset_-2px_-2px_0_-2px_rgba(255,255,255,0.24),inset_-3px_-8px_1px_-6px_rgba(255,255,255,0.18),inset_-0.3px_-1px_4px_0_rgba(0,0,0,0.24),inset_-1.5px_2.5px_0_-2px_rgba(0,0,0,0.4),inset_0_3px_4px_-2px_rgba(0,0,0,0.4),inset_2px_-6.5px_1px_-4px_rgba(0,0,0,0.2),0_1px_5px_0_rgba(0,0,0,0.2),0_6px_16px_0_rgba(0,0,0,0.16)]">
  <div class="absolute left-1 top-1 w-[84px] h-[calc(100%-10px)] rounded-full bg-[#bbbbbc5c] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03),inset_2px_1px_0_-1px_rgba(255,255,255,0.27),inset_-1.5px_-1px_0_-1px_rgba(255,255,255,0.24),inset_-2px_-6px_1px_-5px_rgba(255,255,255,0.18),inset_-1px_2px_3px_-1px_rgba(0,0,0,0.4),inset_0_-4px_1px_-2px_rgba(0,0,0,0.2),0_3px_6px_0_rgba(0,0,0,0.16)] pointer-events-none z-[1]" />
  <button class="relative z-[2] flex items-center justify-center w-[68px] h-full rounded-full text-[#e1e1e1] cursor-pointer">Icon</button>
  <button class="relative z-[2] flex items-center justify-center w-[68px] h-full rounded-full text-[#e1e1e1] cursor-pointer">Icon</button>
  <button class="relative z-[2] flex items-center justify-center w-[68px] h-full rounded-full text-[#e1e1e1] cursor-pointer">Icon</button>
</div>