# Liquid tab bar

Tabs with a lens selection that slides between them, swaps labels cleanly, and fills in icons as it passes.

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

```tsx
import { LiquidTabBar } from 'animui/liquid-tab-bar';
```

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 liquid-tab-bar` 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 interface LiquidTabBarProps {
  tabs: { value: string; label: string; icon: ReactNode; activeIcon?: ReactNode; badge?: number; badgeLabel?: string }[];
  value: string;
  onValueChange: (value: string) => void;
  labels?: "active" | "always" | "none";
  label?: string;
  id?: string;
  className?: string;
}

export interface liquidTabIdliquidPanelId {
  id: string;
  value: string;
}

export declare const LiquidTabBar: ComponentType<LiquidTabBarProps>;
export declare function liquidTabId(id: string, value: string): string;
export declare function liquidPanelId(id: string, value: string): string;

export default LiquidTabBar;
```