Glass Dialog for React

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-dialog

Adds 12 files to components/glassyui and installs @radix-ui/react-dialog and clsx.

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

React Native usage

import { View } from 'react-native';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassDialog,
  GlassDialogClose,
  GlassDialogContent,
  GlassDialogDescription,
  GlassDialogTitle,
  GlassDialogTrigger,
} from '@/components/glassyui/glass-dialog';

export default function DialogExample() {
  return (
    <GlassDialog>
      <GlassDialogTrigger>
        <GlassButton>Delete draft</GlassButton>
      </GlassDialogTrigger>
      <GlassDialogContent>
        <GlassDialogTitle>Delete this draft?</GlassDialogTitle>
        <GlassDialogDescription>It will be removed from all your devices.</GlassDialogDescription>
        <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
          <GlassDialogClose>
            <GlassButton>Cancel</GlassButton>
          </GlassDialogClose>
          <GlassDialogClose>
            <GlassButton variant="prominent">Delete</GlassButton>
          </GlassDialogClose>
        </View>
      </GlassDialogContent>
    </GlassDialog>
  );
}

It also uses Glass Button. Install them together:

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui-native/glass-dialog @glassyui-native/glass-button && npx expo install --fix

Examples

Modal content

<GlassDialogContent>Modal content</GlassDialogContent>

API reference

`GlassDialog`

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	`false`	Controlled or uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	None	Called when the dialog opens or closes.
`modal`	`boolean`	`true`	Traps focus and makes the page behind inert.

Also accepts Radix Dialog.Root props.

`GlassDialogTrigger`

Opens the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders your own element, such as a GlassButton, as the trigger.

Also accepts Radix Dialog.Trigger props.

`GlassDialogContent`

Renders the portal, overlay, glass panel and a close button in the corner.

Prop	Type	Default	Description
`closeLabel`	`string`	`'Close dialog'`	Accessible name of the built-in close button.
`thickness`	`number`	thickness preference	Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim.
`className`	`string`	None	Applies to the glass panel.

Also accepts Radix Dialog.Content props.

`GlassDialogTitle`

The dialog's heading and accessible name.

Also accepts Radix Dialog.Title props.

`GlassDialogDescription`

Supporting text, linked to the dialog with aria-describedby.

Also accepts Radix Dialog.Description props.

`GlassDialogPortal / GlassDialogOverlay`

The portal and the dimmed overlay. GlassDialogContent already renders both; use them only to build your own content.

Also accepts Radix Dialog.Portal and Dialog.Overlay props.

Types: GlassDialogContentProps
Accessibility: Put a GlassDialogTitle in every dialog; the dialog takes its accessible name from it.