Glass Dialog | Glassy UI

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:

Install Glass Dialog

pnpm dlx [email protected] add @glassyui/glass-dialog

Direct registry declarations

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

Package dependencies

@radix-ui/react-dialog
clsx

Registry dependencies

@glassyui/glass-panel

File targets

components/glassyui/glass-dialog.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-dialog
clsx

Installed files

components/glassyui/glass-dialog.tsx
components/glassyui/glass-panel.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/use-local-light.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassDialog, GlassDialogContent, GlassDialogTitle, GlassDialogTrigger } from "@/components/glassyui/glass-dialog";

export function DialogDemo() {
  return (
    <GlassDialog>
      <GlassDialogTrigger>Open</GlassDialogTrigger>
      <GlassDialogContent>
        <GlassDialogTitle>Glass dialog</GlassDialogTitle>
      </GlassDialogContent>
    </GlassDialog>
  );
}

Examples

Modal content

<GlassDialogContent>Modal content</GlassDialogContent>

API

GlassDialog

Radix Dialog root.

GlassDialogTrigger

Radix trigger primitive.

GlassDialogPortal

Radix portal primitive.

GlassDialogOverlay

Styled modal overlay.

GlassDialogContent

Portal, overlay, named close button, and glass panel content.

GlassDialogContentProps

Radix content props plus an optional closeLabel.

GlassDialogTitle

Radix accessible dialog title.

GlassDialogDescription

Radix accessible dialog description.

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.