Glass Toggle Group

A segmented control — a frosted glass bar with a sliding indicator that glides to the selected option.

Playground

Edit the props live and copy the config.

Tint

0.35

<GlassToggleGroup defaultValue="day" tint={0.35}>
  <GlassToggleItem value="day">Day</GlassToggleItem>
  <GlassToggleItem value="week">Week</GlassToggleItem>
  <GlassToggleItem value="month">Month</GlassToggleItem>
</GlassToggleGroup>

Install

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

Usage

import { GlassToggleGroup, GlassToggleItem } from '@/components/ui/glass-toggle-group';

<GlassToggleGroup value={view} onValueChange={setView}>
  <GlassToggleItem value="day">Day</GlassToggleItem>
  <GlassToggleItem value="week">Week</GlassToggleItem>
  <GlassToggleItem value="month">Month</GlassToggleItem>
</GlassToggleGroup>

Props

GlassToggleGroup

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	`""`	Initial value when uncontrolled.
`onValueChange`	`(v: string) => void`	—	Fires on change.
`tint`	`number`	`0.35`	Frosted tint of the bar.

GlassToggleItem

Prop	Type	Default	Description
`value`	`string`	required	The value this item selects.

The indicator slides between options with a spring-like ease, tracking each item's position and width.