Feedback
Glass Toast
A glass notification for brief updates, announced to screen readers.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-toastnpx shadcn@4.14.1 add @glassyui-native/glass-toastPreview
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-toastWhat this installs11 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-toast itself in registry.json.
Package dependencies
@radix-ui/react-toastclsx
Registry dependencies
@glassyui/glass-panel
File targets
components/glassyui/glass-toast.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-toastclsx
Installed files
components/glassyui/glass-toast.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-toastnpx expo install --fixUsage
import { GlassToast, GlassToastDescription, GlassToastProvider, GlassToastTitle, GlassToastViewport } from "@/components/glassyui/glass-toast";
export function ToastDemo() {
return (
<GlassToastProvider>
<GlassToast open>
<GlassToastTitle>Saved</GlassToastTitle>
<GlassToastDescription>Your changes are stored.</GlassToastDescription>
</GlassToast>
<GlassToastViewport />
</GlassToastProvider>
);
}import { useState } from 'react';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
GlassToast,
GlassToastAction,
GlassToastDescription,
GlassToastProvider,
GlassToastTitle,
GlassToastViewport,
} from '@/components/glassyui/glass-toast';
// Mount the provider and the viewport once, near the root of your app; toasts declared
// anywhere under the provider appear in the viewport.
export default function ToastExample() {
const [open, setOpen] = useState(false);
return (
<GlassToastProvider>
<GlassButton onPress={() => setOpen(true)}>Archive</GlassButton>
<GlassToast onOpenChange={setOpen} open={open}>
<GlassToastTitle>Message archived</GlassToastTitle>
<GlassToastDescription>You can find it in Archive.</GlassToastDescription>
<GlassToastAction altText="Restore the message" onPress={() => setOpen(false)}>
Undo
</GlassToastAction>
</GlassToast>
<GlassToastViewport />
</GlassToastProvider>
);
}
This example also uses Glass Button. Install everything it uses:
npx shadcn@4.14.1 add @glassyui-native/glass-toast @glassyui-native/glass-buttonExamples
<GlassToast>
<GlassToastTitle>Saved</GlassToastTitle>
<GlassToastDescription>Your changes are stored.</GlassToastDescription>
<GlassToastClose />
</GlassToast><GlassToast>
<GlassToastTitle>Message deleted</GlassToastTitle>
<GlassToastAction altText="Undo the delete" onClick={undo}>
Undo
</GlassToastAction>
</GlassToast>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.
GlassToastProviderRadix Toast provider.
GlassToastGlass panel toast root.
GlassToastViewportFixed viewport for toast placement.
GlassToastTitleStyled Radix toast title.
GlassToastDescriptionStyled Radix toast description.
GlassToastCloseA round dismiss button that draws its own ×. Named "Dismiss" unless you pass aria-label.
GlassToastActionA pill under the message, such as Undo. altText says how to do it without the button.
Notes
Motion
A toast slides in from the side its swipe direction points to (the right unless the provider's swipeDirection says otherwise) and back out when it closes. Drag it that way to dismiss it: a short drag springs back and a fling sends it away. Reduced motion shows and hides it at once.
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.