GlassAlert

A glassmorphism-styled alert banner with info, success, warning, and error variants.

Preview

Update available

A new version is ready to install.

Deployed

Your app is live.

High memory

Usage is at 87%.

Build failed

TypeScript errors found.

Usage

import { GlassAlert } from "koori-ui";
 
<GlassAlert variant="info" title="Heads up">
  This action cannot be undone.
</GlassAlert>

Variants

<GlassAlert variant="info" title="Info">Something to note.</GlassAlert>
<GlassAlert variant="success" title="Success">Operation completed.</GlassAlert>
<GlassAlert variant="warning" title="Warning">Proceed with caution.</GlassAlert>
<GlassAlert variant="error" title="Error">Something went wrong.</GlassAlert>

With Icon

import { Info } from "lucide-react";
import { GlassAlert } from "koori-ui";
 
<GlassAlert
  variant="info"
  title="New release"
  icon={<Info className="h-4 w-4" />}
>
  Version 2.0 is now available.
</GlassAlert>

Without Title

<GlassAlert variant="success">Your changes have been saved.</GlassAlert>

Props

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Visual variant
`title`	`string`	—	Optional bold title above the content
`icon`	`ReactNode`	—	Optional icon rendered to the left
`children`	`ReactNode`	—	Alert body content
`className`	`string`	—	Additional CSS classes

All native <div> props are also accepted.