Glass Tab Bar

Navigation

About

A floating, iOS-style bottom tab bar with a liquid-glass selection bubble that slides smoothly between active tabs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Tab Bar to your project and fits it to your theme.

Code

How Glass Tab Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlassTabBar, GlassTabBarItem } from "@/components/ui/glass-tab-bar";
import { Home, Search, User, Settings } from "lucide-react";

export default function GlassTabBarDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10 text-foreground">
      <GlassTabBar defaultValue="home">
        <GlassTabBarItem value="home" icon={<Home />} label="Home" />
        <GlassTabBarItem value="search" icon={<Search />} label="Search" />
        <GlassTabBarItem value="profile" icon={<User />} label="Profile" />
        <GlassTabBarItem
          value="settings"
          icon={<Settings />}
          label="Settings"
        />
      </GlassTabBar>
    </div>
  );
}