# Glass tab bar

A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it compacts on scroll down.

- ID: `glass-tabbar`
- Import: `animui/glass-tabbar`
- Category: Special
- Runtime exports: `GlassTabBar`
- Declaration: `types/pro/glass-tabbar.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: liquid-tab-bar, morph-nav, dock, tabs

```tsx
import { GlassTabBar } from 'animui/glass-tabbar';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info glass-tabbar` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export type RefObject<T> = { readonly current: T | null };
export interface GlassTabBarProps {
  items: GlassTabBarItem[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  action?: GlassTabBarItem;
  compact?: boolean;
  defaultCompact?: boolean;
  onCompactChange?: (compact: boolean) => void;
  scrollRef?: RefObject<HTMLElement | null>;
  collapseOnScroll?: boolean;
  label?: string;
  className?: string;
  style?: CSSProperties;
}

export interface GlassTabBarItem {
  value: string;
  label: string;
  icon: ReactNode;
  badge?: number | string;
}

export declare const GlassTabBar: ComponentType<GlassTabBarProps>;

export default GlassTabBar;
```