Liquid Glass Alert

A premium 3D liquid glass alert/callout component with 6 severity variants, top gloss glare reflection, bottom prism refraction, left accent bar, dismissible spring exit animation, and the same crystal glass aesthetic as the Liquid Glass Button and Switch.

...

How to Import

Add this import to your component file

app/page.tsx

1import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"info" \| "success" \| "warning" \| "error" \| "glass" \| "aurora"	"info"	Severity style variant controlling colour, icon, and glow.	Optional
title	string	-	Optional bold title rendered above the children content.	Optional
children	React.ReactNode	-	Alert body content.	Optional
icon	React.ReactNode	-	Override the default variant icon with a custom node.	Optional
dismissible	boolean	false	Show an × dismiss button that triggers an exit animation.	Optional
onDismiss	() => void	-	Callback fired when the dismiss button is clicked.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert";
2
3export function Demo() {
4  return (
5    <div className="flex flex-col gap-3 p-6 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20">
6      <LiquidGlassAlert variant="info" title="Info" dismissible>
7        Your project is building. Deployment in ~2 min.
8      </LiquidGlassAlert>
9      <LiquidGlassAlert variant="success" title="Done!">
10        Changes saved to production.
11      </LiquidGlassAlert>
12      <LiquidGlassAlert variant="warning" title="Heads up">
13        Quota resets in 3 days.
14      </LiquidGlassAlert>
15      <LiquidGlassAlert variant="error" title="Build failed" dismissible>
16        TypeScript error at line 42.
17      </LiquidGlassAlert>
18    </div>
19  );
20}

Variants

Different visual and behavioral variants of the component

Info Variant

Sky-blue glass tint for neutral informational messages.

Preview not available for this example.

Previoussparkle-cursor

Nextliquid-glass-alert-dialog

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Alert

A premium 3D liquid glass alert/callout component with 6 severity variants, top gloss glare reflection, bottom prism refraction, left accent bar, dismissible spring exit animation, and the same crystal glass aesthetic as the Liquid Glass Button and Switch.

...

How to Import

Add this import to your component file

app/page.tsx

1import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"info" \| "success" \| "warning" \| "error" \| "glass" \| "aurora"	"info"	Severity style variant controlling colour, icon, and glow.	Optional
title	string	-	Optional bold title rendered above the children content.	Optional
children	React.ReactNode	-	Alert body content.	Optional
icon	React.ReactNode	-	Override the default variant icon with a custom node.	Optional
dismissible	boolean	false	Show an × dismiss button that triggers an exit animation.	Optional
onDismiss	() => void	-	Callback fired when the dismiss button is clicked.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert";
2
3export function Demo() {
4  return (
5    <div className="flex flex-col gap-3 p-6 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20">
6      <LiquidGlassAlert variant="info" title="Info" dismissible>
7        Your project is building. Deployment in ~2 min.
8      </LiquidGlassAlert>
9      <LiquidGlassAlert variant="success" title="Done!">
10        Changes saved to production.
11      </LiquidGlassAlert>
12      <LiquidGlassAlert variant="warning" title="Heads up">
13        Quota resets in 3 days.
14      </LiquidGlassAlert>
15      <LiquidGlassAlert variant="error" title="Build failed" dismissible>
16        TypeScript error at line 42.
17      </LiquidGlassAlert>
18    </div>
19  );
20}

Variants

Different visual and behavioral variants of the component

Info Variant

Sky-blue glass tint for neutral informational messages.

Preview not available for this example.

Previoussparkle-cursor

Nextliquid-glass-alert-dialog

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Alert

How to Import

Props

Basic Usage

Variants

Info Variant

On This Page

Contribute

Liquid Glass Alert

How to Import

Props

Basic Usage

Variants

Info Variant

On This Page

Contribute

React Liquid Glass Alert Component - Lightswind UI

Key Details of React Liquid Glass Alert

Liquid Glass Alert

How to Import

Props

Basic Usage

Variants

Info Variant

On This Page

Contribute

Liquid Glass Alert

How to Import

Props

Basic Usage

Variants

Info Variant

On This Page

Contribute