Glass Alert for React

Preview

Heads up

Your trial ends in three days.

Saved

Every change is in.

Almost full

You have used 92% of your storage.

Payment failed

Update your card to keep your plan.

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 Alert

pnpm dlx shadcn@4.14.1 add @glassyui/glass-alert

What 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.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassAlert } from "@/components/glassyui/glass-alert";

export function TrialAlert() {
  return <GlassAlert title="Heads up">Your trial ends in three days.</GlassAlert>;
}

Examples

Tones

<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>

Dismissible

<GlassAlert title="New version" onDismiss={() => setShown(false)}>
  Reload to get it.
</GlassAlert>

API

GlassAlert

Forward-ref div with a tone icon, title and description.

tone

info (default), success, warning or danger.

title

A short bold line above the message.

icon

Replaces the tone icon. Pass false for none.

onDismiss

Shows 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.

dismissLabel

Names 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.