Glass Tabs

Navigation 1

About

A segmented tab control whose selection indicator is a frosted liquid-glass bubble that glides to the active tab.

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

Code

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

Usage.tsx

"use client";

import {
  GlassTabs,
  GlassTabsList,
  GlassTabsTrigger,
} from "@/components/ui/glass-tabs";

export default function GlassTabsDemo() {
  return (
    <GlassTabs defaultValue="week">
      <GlassTabsList>
        <GlassTabsTrigger value="day">Day</GlassTabsTrigger>
        <GlassTabsTrigger value="week">Week</GlassTabsTrigger>
        <GlassTabsTrigger value="month">Month</GlassTabsTrigger>
        <GlassTabsTrigger value="year">Year</GlassTabsTrigger>
      </GlassTabsList>
    </GlassTabs>
  );
}