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-controlnpx shadcn@4.14.1 add @glassyui-native/glass-segmented-controlPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
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
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-segmented-controlnpx expo install --fixUsage
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>
);
}import { useState } from 'react';
import {
GlassSegmentedControl,
GlassSegmentedControlItem,
} from '@/components/glassyui/glass-segmented-control';
export default function SegmentedControlExample() {
const [period, setPeriod] = useState('week');
return (
<GlassSegmentedControl accessibilityLabel="Period" onValueChange={setPeriod} value={period}>
<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
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
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 and stretches toward the new option while the labels stay fixed. 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.