Controls
Glass Segmented Control
A single-choice control whose glass bubble stretches between options and can be dragged.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-segmented-controlPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-segmented-controlWhat this installs12 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-segmented-control itself in registry.json.
Package dependencies
@radix-ui/react-radio-groupclsx
Registry dependencies
@glassyui/glass-provider@glassyui/glass-panel
File targets
components/glassyui/glass-segmented-control.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/liquid-motion.ts
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
@radix-ui/react-radio-groupclsx
Installed files
components/glassyui/glass-segmented-control.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/liquid-motion.tscomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.csscomponents/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.ts
Usage
import { GlassSegmentedControl, GlassSegmentedControlItem } from "@/components/glassyui/glass-segmented-control";
export function SegmentedDemo() {
return (
<GlassSegmentedControl aria-label="View" defaultValue="week">
<GlassSegmentedControlItem value="day">Day</GlassSegmentedControlItem>
<GlassSegmentedControlItem value="week">Week</GlassSegmentedControlItem>
<GlassSegmentedControlItem value="month">Month</GlassSegmentedControlItem>
</GlassSegmentedControl>
);
}Examples
const [view, setView] = useState("list");
<GlassSegmentedControl aria-label="Layout" value={view} onValueChange={setView}>
<GlassSegmentedControlItem value="list">List</GlassSegmentedControlItem>
<GlassSegmentedControlItem value="grid">Grid</GlassSegmentedControlItem>
</GlassSegmentedControl>API
GlassSegmentedControlRadix RadioGroup root on a glass pill with the liquid bubble.
GlassSegmentedControlItemRadix RadioGroup item; one per option.
GlassSegmentedControlPropsRadix RadioGroup root props.
value / defaultValueControlled or uncontrolled selected option.
Notes
Layout
Options share the width equally. CSS positions the bubble from the checked item, so it is right from the first server render.
Motion
The bubble lifts, stretches toward the new option and magnifies the label under it. Drag it to another option to choose that one. Reduced motion moves it straight there.
Keyboard
Arrow keys move the selection, as in any radio group. Name the group with aria-label.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.