Overlays
Glass Dialog
A modal on raised glass that holds focus until it closes.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-dialognpx shadcn@4.14.1 add @glassyui-native/glass-dialogPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-dialogWhat this installs11 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-dialog itself in registry.json.
Package dependencies
@radix-ui/react-dialogclsx
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-dialogclsx
Installed files
components/glassyui/glass-dialog.tsxcomponents/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.tscomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-dialognpx expo install --fixUsage
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>
);
}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>
);
}
This example also uses Glass Button. Install everything it uses:
npx shadcn@4.14.1 add @glassyui-native/glass-dialog @glassyui-native/glass-buttonExamples
<GlassDialogContent>Modal content</GlassDialogContent>API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassDialogRadix Dialog root.
GlassDialogTriggerRadix trigger primitive.
GlassDialogPortalRadix portal primitive.
GlassDialogOverlayStyled modal overlay.
GlassDialogContentPortal, overlay, named close button, and glass panel content.
GlassDialogContentPropsRadix content props plus an optional closeLabel and thickness.
GlassDialogTitleRadix accessible dialog title.
GlassDialogDescriptionRadix 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.