Glass Morphing Tabs

The GlassTabs component is an ultra-premium variation of standard navigation tabs.

Instead of a solid color block for the active tab indicator, it uses a heavily styled, frosted glass element (backdrop-blur-md with inner white borders and shadows). Powered by Framer Motion's layoutId, the glass block physically stretches, squishes, and morphs across the tab buttons when clicked.

Live Preview

[!TIP] Refraction Effect: Notice how the active tab indicator isn't just gray—it actually refracts and blurs the vibrant rotating orbs behind it! This effect only works if your app has a colorful, dynamic background behind the tabs.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GlassTabs } from "@/components/creative/glass-tabs";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GlassTabs } from "@/components/creative/glass-tabs";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GlassTabs
        tabs{/* value */}
        activeTab="example"
        onChange="example"
      />
    </div>
  );
}