Glass Tab Bar

A frosted-glass tab bar for the bottom of a mobile app. On mount each icon pops in turn on a slightly bouncy spring; when you switch tabs, the white active pill slides from the previous tab to the new one while the active tab expands from icon-only to icon + label. With an odd number of items you can turn on raisedCenter to make the middle item a raised round primary button (for example "New"); badges support unread counts (99+ above 99) and a small dot, and scale once whenever the count changes. The active value supports controlled and uncontrolled modes.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<GlassTabBar/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/glass-tab-bar.en.json

Usage

import { Compass, House, MessageCircle, Plus, User } from "lucide-react";
import { GlassTabBar } from "@/components/ui/glass-tab-bar";

const [tab, setTab] = React.useState("home");

<GlassTabBar
  position="fixed"
  raisedCenter
  value={tab}
  onValueChange={setTab}
  onCenterPress={() => openComposer()}
  items={[
    { id: "home", icon: <House />, label: "Home" },
    { id: "explore", icon: <Compass />, label: "Find" },
    { id: "create", icon: <Plus />, label: "New" },
    { id: "messages", icon: <MessageCircle />, label: "Inbox", badge: 3 },
    { id: "me", icon: <User />, label: "Me" },
  ]}
/>

Props

GlassTabBarItem

CSS variables

How it works

• Glass material: a translucent white fill (neutral-900/55 in dark mode) with backdrop-blur and backdrop-saturate-150, a 1px inner highlight along the top edge, a faint 1px border and a soft outer shadow, all in a fully rounded pill.
• The active pill slides between tabs with motion's layoutId; the layoutId is prefixed with useId, so several bars on one page never interfere with each other.
• The active tab's width expands with a layout animation and its label fades in after a 60ms delay while sliding 4px in from the left; on first render it is shown directly, without the expand animation.
• The centre button is 56px across, floats 18px up and does not take part in the pill slide; it is not a tab, and pressing it only calls onCenterPress unless centerSelectable is on.
• The mount pop waits until the component has mounted, when the user's motion preference and the CSS variable values are both known, so the SSR first render matches the client.

Accessibility

• The outer element is a nav (default aria-label "Main navigation") containing a role="tablist"; each tab is a role="tab" with aria-selected
• Each tab's aria-label is its label, with ", 3 unread" or ", new activity" appended when it has a badge; the visual badge and expanded label are hidden from assistive technology to avoid double announcements
• Roving tabindex: only the active tab is in the Tab order; ← / → cycle, Home / End jump to the ends, and moving also selects (automatic activation)
• The centre button is a plain button (outside the tablist) using its item label as its aria-label; with centerSelectable on and selected it sets aria-current="page"
• Every button is type="button" and has a focus-visible ring
• When the user has reduce motion enabled at the system level, icons do not pop in, the pill jumps straight into place, badges do not scale and the label appears directly