FeedbackNew
Glass Alert
A short message set in tinted glass, with four tones and an optional dismiss.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-alertnpx shadcn@4.14.1 add @glassyui-native/glass-alertPreview
Heads up
Saved
Almost full
Payment failed
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-alertWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-alert itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-alert.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
clsx
Installed files
components/glassyui/glass-alert.tsxcomponents/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-alertnpx expo install --fixUsage
import { GlassAlert } from "@/components/glassyui/glass-alert";
export function TrialAlert() {
return <GlassAlert title="Heads up">Your trial ends in three days.</GlassAlert>;
}import { useState } from 'react';
import { GlassAlert } from '@/components/glassyui/glass-alert';
export default function AlertExample() {
const [visible, setVisible] = useState(true);
if (!visible) return null;
return (
<GlassAlert onDismiss={() => setVisible(false)} title="Payment failed" tone="danger">
Update your card to keep your plan.
</GlassAlert>
);
}
Examples
<GlassAlert tone="success" title="Saved">Every change is in.</GlassAlert>
<GlassAlert tone="warning" title="Almost full">92% of your storage is used.</GlassAlert>
<GlassAlert tone="danger" title="Payment failed">Update your card.</GlassAlert><GlassAlert title="New version" onDismiss={() => setShown(false)}>
Reload to get it.
</GlassAlert>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.
GlassAlertForward-ref div with a tone icon, title and description.
toneinfo (default), success, warning or danger.
titleA short bold line above the message.
iconReplaces the tone icon. Pass false for none.
onDismissShows a close button. The alert folds away, then this runs: remove the alert there, and give each alert a stable key so a later one never inherits the fold.
dismissLabelNames the close button. Defaults to Dismiss.
Notes
Announcements
Warnings and errors use role="alert" and interrupt screen readers. Info and success use role="status" and wait. Override with role.
Contrast
Every tone keeps 4.5:1 text contrast over a pure black or pure white backdrop in both themes.
Motion
Dismissing folds the alert to nothing, so what sits below it slides up instead of jumping. Its own padding and margin fold with it; space that comes from a parent's gap cannot, so put the space between stacked alerts in a margin on the alert. Reduced motion removes 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.