Glass Tabs

Tab list with a spring-driven glass indicator that glides between options, tracking position and width with separate spring drivers.

Playground

Edit the props live and copy the config.

Tint

0.35

<Tabs defaultValue="home">
  <TabsList tint={0.35}>
    <TabsTrigger value="home">Home</TabsTrigger>
    {/* … */}
  </TabsList>
</Tabs>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-tabs.json

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/glass-tabs';

<Tabs defaultValue="home">
  <TabsList>
    <TabsTrigger value="home">Home</TabsTrigger>
    <TabsTrigger value="library">Library</TabsTrigger>
    <TabsTrigger value="stats">Stats</TabsTrigger>
  </TabsList>
  <TabsContent value="home">Home content</TabsContent>
  <TabsContent value="library">Library content</TabsContent>
  <TabsContent value="stats">Stats content</TabsContent>
</Tabs>

Components

Tabs (root)

Prop	Type	Default	Description
`value`	`string`	—	Controlled active tab.
`defaultValue`	`string`	`""`	Initial tab when uncontrolled.
`onValueChange`	`(v: string) => void`	—	Fires on tab change.

TabsList

Prop	Type	Default	Description
`tint`	`number`	`0.35`	Frosted tint of the tab bar background.

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	required	The value this trigger activates.

TabsContent

Prop	Type	Default	Description
`value`	`string`	required	Only renders when this value is active.

The indicator tracks the active trigger's position and width. Two independent springs (from glass-motion) animate X position and width separately — when switching between tabs of different widths, the indicator stretches and contracts with spring physics, giving a droplet-like deformation.