Glass Segmented
A segmented control on glass whose clear thumb stretches toward its target and refracts the scene.
Overview
A glass track holds the options; the thumb is a droplet of clearer glass with its own rim light. When the selection changes it stretches in the direction of travel, then settles on a spring.
In Chromium the thumb bends the background through an SVG displacement filter, so the photo behind it warps like it would through real glass. Other browsers get the same thumb with blur and brightness, which still reads as glass.
It is a radiogroup with roving focus: arrow keys move and select, Home and End jump.
When to use
- Switching views over a photo or video, such as galleries, maps and media apps.
- A floating control on an expressive hero.
When not to use
- On flat surfaces: use Segmented Control.
- More than five options: use a select.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/glass-segmented.jsonnpx shadcn@latest add https://sundaeui.dev/r/glass-segmented.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/glass-segmented.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/glass-segmented.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy glass-segmented.tsx and glass-segmented.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { GlassSegmented } from '@/components/sundae/glass-segmented'
<GlassSegmented
label="Range"
options={[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]}
defaultValue="week"
onValueChange={setRange}
/>Props
| Prop | Type | Default |
|---|---|---|
options*Segments. | { value: string; label: string }[] | — |
value / defaultValueSelected value (controlled / uncontrolled). | string | — |
onValueChangeCalled when the selection changes. | (value: string) => void | — |
label*Accessible name of the group. | string | — |
refractBend the background through the thumb where supported. | boolean | true |
Accessibility
- role="radiogroup" with role="radio" options, aria-checked and roving tabindex.
- Arrow keys move and select; Home/End jump to the ends.
- Reduced motion removes the stretch and the spring; the selection still moves.
Customization
- Glass, edge and ink colours are CSS custom properties on .sd-gseg.
- Set refract={false} for a lighter, filter-free version.
FAQ
- Is Glass Segmented free?
- Glass Segmented is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Glass Segmented?
- Run npx shadcn@latest add https://sundaeui.dev/r/glass-segmented.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Glass Segmented support keyboard and screen readers?
- role="radiogroup" with role="radio" options, aria-checked and roving tabindex. Arrow keys move and select; Home/End jump to the ends.
- Does Glass Segmented respect reduced motion?
- Reduced motion removes the stretch and the spring; the selection still moves.
More like this
All components →- Pro
Glass Control Center
Components · Refined - Pro
Glass Notifications
Components · Refined Follow Button
Components · RefinedBookmark Button
Components · RefinedTheme Toggle
Components · RefinedGrid / List View Switcher
Components · Refined