ControlsNew
Glass Select
A recessed trigger that opens a slab of glass to choose from.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-selectnpx shadcn@4.14.1 add @glassyui-native/glass-selectPreview
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-selectWhat this installs11 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-select itself in registry.json.
Package dependencies
@radix-ui/react-selectclsx
Registry dependencies
@glassyui/glass-panel
File targets
components/glassyui/glass-select.tsx
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-selectclsx
Installed files
components/glassyui/glass-select.tsxcomponents/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.tscomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
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-selectnpx expo install --fixUsage
import {
GlassSelect,
GlassSelectContent,
GlassSelectItem,
GlassSelectTrigger,
GlassSelectValue,
} from "@/components/glassyui/glass-select";
export function FrameworkDemo() {
return (
<GlassSelect>
<GlassSelectTrigger aria-label="Framework">
<GlassSelectValue placeholder="Choose a framework" />
</GlassSelectTrigger>
<GlassSelectContent>
<GlassSelectItem value="next">Next.js</GlassSelectItem>
<GlassSelectItem value="remix">Remix</GlassSelectItem>
</GlassSelectContent>
</GlassSelect>
);
}import { useState } from 'react';
import {
GlassSelect,
GlassSelectContent,
GlassSelectItem,
GlassSelectTrigger,
GlassSelectValue,
} from '@/components/glassyui/glass-select';
export default function SelectExample() {
const [city, setCity] = useState('');
return (
<GlassSelect onValueChange={setCity} value={city}>
<GlassSelectTrigger accessibilityLabel="City">
<GlassSelectValue placeholder="Choose a city" />
</GlassSelectTrigger>
<GlassSelectContent>
<GlassSelectItem value="lisbon">Lisbon</GlassSelectItem>
<GlassSelectItem value="oslo">Oslo</GlassSelectItem>
<GlassSelectItem value="tokyo">Tokyo</GlassSelectItem>
</GlassSelectContent>
</GlassSelect>
);
}
Examples
<GlassSelectContent>
<GlassSelectGroup>
<GlassSelectLabel>React</GlassSelectLabel>
<GlassSelectItem value="next">Next.js</GlassSelectItem>
</GlassSelectGroup>
<GlassSelectSeparator />
<GlassSelectGroup>
<GlassSelectLabel>Other</GlassSelectLabel>
<GlassSelectItem value="astro">Astro</GlassSelectItem>
</GlassSelectGroup>
</GlassSelectContent>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.
GlassSelectRadix select root. value, onValueChange, defaultValue, disabled and name.
GlassSelectTriggerThe closed field. Name it with aria-label or a label element.
GlassSelectValueShows the chosen item, or the placeholder.
GlassSelectContentThe open list, as wide as the trigger. Edge lens on Chromium.
GlassSelectItemOne option. value is required and cannot be empty.
GlassSelectGroup / GlassSelectLabel / GlassSelectSeparatorGroup options under a heading.
Notes
Keyboard
Arrow keys move, typing jumps to a matching item, Enter or Space chooses and Escape closes.
Forms
With a name, the select submits its value in a native form and takes part in form resets.
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.