Overlays
Glass Popover
Anchored floating content using a raised glass panel.
Preview
Release 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:
pnpm dlx [email protected] add @glassyui/glass-popoverDirect registry declarations
These values belong to @glassyui/glass-popover itself in registry.json.
Package dependencies
@radix-ui/react-popoverclsx
Registry dependencies
@glassyui/glass-panel
File targets
components/glassyui/glass-popover.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-popoverclsx
Installed files
components/glassyui/glass-popover.tsxcomponents/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/use-local-light.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassPopover, GlassPopoverContent, GlassPopoverTrigger } from "@/components/glassyui/glass-popover";
export function PopoverDemo() {
return (
<GlassPopover>
<GlassPopoverTrigger>Open</GlassPopoverTrigger>
<GlassPopoverContent>Glass popover</GlassPopoverContent>
</GlassPopover>
);
}Examples
<GlassPopoverContent sideOffset={16}>Content</GlassPopoverContent>API
GlassPopoverRadix Popover root.
GlassPopoverTriggerRadix trigger primitive.
GlassPopoverAnchorRadix anchor primitive for custom positioning.
GlassPopoverContentPortal-backed glass content.
Notes
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.