Alerts

A highly versatile Alert component designed to communicate states and important information to your users.

Along with the classic solid and outline variations, this component now features three completely modern aesthetics: modern (SaaS style), glass (glassmorphism), and glow (dark mode neon).

Each example shows a live preview with the exact code to copy.

Alert

Passtitle: and message for the heading and body text.
type"success": picks the semantic colour scheme.
variant"modern": sets the visual style — a card with a coloured left rail and shadow.
icon"CheckCircle2": names an icon from the block's ICON_MAP.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Alert

npx shadcn@latest add @algorize-ui/alert

components/custom/blocks/Alerts.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Alert needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Semantic types

Usetype: to pick the semantic colour scheme — primary, secondary, success, danger, warning, info or dark. It tints every variant the same way.

Variants

variant"solid": gives a tinted background with a matching border.
variant"outline": gives a plain surface with a coloured border only.
variant"modern": is the card style — coloured left rail and a shadow.

Glass

Setvariant"glass": to frost the alert with a slow shimmer sweep — it needs a gradient or image behind it to read.

Glow

Setvariant"glow": for a neon border, shadow and a pulsing icon — built for dark dashboards.

Icons

icon"Info": renders a Lucide icon when the string is a key of ICON_MAP — CheckCircle2, AlertTriangle, Info, Bell, XCircle.
icon"🚀": any other string is rendered as-is, so emoji work.
icon: omitted (or null) gives a text-only alert.

Dismissible

Setdismissible: to add a close button that animates the alert out.
onDismiss: fires after that animation, so it is where you drop the alert from your own state.

Rich content

Passchildren: to render buttons, lists or any markup. It appears below message rather than replacing it, so omit message when the children say it all.

Features

Learn about the Alert component's capabilities, including different severity levels, customizable icons, and dismissible actions.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`type`	`"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "dark"`	`"primary"`	Determines the semantic color scheme of the alert.
`variant`	`"solid" \| "outline" \| "modern" \| "glass" \| "glow"`	`"modern"`	Applies overarching structural layouts and visual styles.
`dismissible`	`boolean`	`false`	If true, renders an "X" button that smoothly animates the alert out of the DOM.
`icon`	`string \| ReactNode`	`null`	The icon to display. You can pass a string matching the `ICON_MAP`, an emoji, or a custom SVG.
`title`	`string`	`null`	The bold header text of the alert.