Components
Glass Select
A glass select — a frosted trigger that opens a portaled listbox of options with a checkmark on the active one.
Install
npx shadcn@latest add https://websiteglass.com/r/glass-select.jsonUsage
import {
GlassSelect,
GlassSelectTrigger,
GlassSelectContent,
GlassSelectItem,
} from '@/components/ui/glass-select';
<GlassSelect value={value} onValueChange={setValue}>
<GlassSelectTrigger placeholder="Pick one" />
<GlassSelectContent>
<GlassSelectItem value="apple">Apple</GlassSelectItem>
<GlassSelectItem value="banana">Banana</GlassSelectItem>
</GlassSelectContent>
</GlassSelect>Props
GlassSelect is controlled via value / onValueChange (or uncontrolled with
defaultValue). GlassSelectTrigger takes a placeholder and shows the
selected item's label. GlassSelectContent is portaled (no clipping) and takes
tint. Each GlassSelectItem needs a value; a string child is used as the
trigger label. Dismisses on outside-click or Escape.