Glass Selectors
Glassmorphism selector system with 7 patterns — frosted glass pill, neon glass tabs, crystal capsule, aurora strip, glass card grid, ghost blur selector, and prismatic dot nav. Features backdrop blur, luminous active states, and glass-surface aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for immersive glass surfaces, light for soft frosted interfaces. |
| compact | boolean | false | Hides the Blur Surfaces section and tightens spacing. |
| accentColor | string | "#8b5cf6" | Accent color used for glow effects, active borders, and luminous states. |
When to Use
Ideal for high-end digital agencies, creative portfolios, AI dashboards, and any interface that wants a premium glass or neon aesthetic. Best placed over gradient or dark backgrounds.
Best Practices
Use over a visually rich background (gradient, image, or pattern) to maximize the glassmorphism effect. Ensure sufficient contrast between glass surfaces and background for accessibility.
Why This Component Matters
Glass-based selectors communicate sophistication and digital craft. The blur and luminance effects create depth and hierarchy that flat selectors cannot achieve.
FAQ
QDo the blur effects require a background?
Yes — backdrop-filter blur only shows the effect when there is visual content behind the element. Place over gradients or images for best results.
QCan I use a different accent color?
Yes — accentColor controls all glow, border, and active state colors across every glass variant.
QIs it mobile responsive?
Yes — all variants use flexbox and wrap naturally on smaller screens.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.