# Glass tabs (goodtabs UI)

Tabs on a pill track with a pane of glass that slides under the active tab.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-tabs.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-tabs`

## Usage

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

<GlassTabs defaultValue="day">
  <GlassTabsList aria-label="Range">
    <GlassTabsTrigger value="day">Day</GlassTabsTrigger>
    <GlassTabsTrigger value="week">Week</GlassTabsTrigger>
  </GlassTabsList>
</GlassTabs>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value, defaultValue, onValueChange | `radix Tabs props` |  | Controlled or uncontrolled, on GlassTabs. |
| aria-label | `string` |  | Name the GlassTabsList. |

## When to use

- A two to four way switch that floats over a photo or video
- A chart or map overlay that needs a range switch

## When not to use

- On flat surfaces: use segmented-tabs
- For long labels or more than five options

## Notes for agents

- Built on the shadcn tabs with the line variant, so radix keys, roles and focus all work. The indicator is an aria-hidden sibling
- The indicator slides in 150ms on transform and width, and does not slide under reduced motion
- Panels are not glass. Give GlassTabsContent its own solid backing, as the second demo does

Docs: https://ui.goodtabs.co/components/glass-tabs