Glass Select for React

Preview

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:

Install Glass Select

pnpm dlx shadcn@4.14.1 add @glassyui/glass-select

What this installs11 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-select itself in registry.json.

Package dependencies

@radix-ui/react-select
clsx

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-select
clsx

Installed files

components/glassyui/glass-select.tsx
components/glassyui/glass-panel.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/lib/scene-context.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

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>
  );
}

Examples

Groups and separators

<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

GlassSelect

Radix select root. value, onValueChange, defaultValue, disabled and name.

GlassSelectTrigger

The closed field. Name it with aria-label or a label element.

GlassSelectValue

Shows the chosen item, or the placeholder.

GlassSelectContent

The open list, as wide as the trigger. Edge lens on Chromium.

GlassSelectItem

One option. value is required and cannot be empty.

GlassSelectGroup / GlassSelectLabel / GlassSelectSeparator

Group 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.