Component

Neo Alert

Loud, impossible-to-miss feedback messages. Designed to interrupt (visually) and inform with brutal efficiency.

01 Installation

Copy the source code below into your project. Requires react-icons.

Source Code

New Component

src/components/neo/

NeoAlert.tsx

Or switch to the "Code" tab to view manually

02 Basic Usage

Simple Alerts

Information

This is a standard info alert using the info variant.

Mission Accomplished

Your changes have been saved successfully to the mainframe.

03 Variants

Built-in color schemes for common states. Icons are automatically assigned but can be overridden.

All Variants

Info

System update available.

Success

Deployment successful.

Warning

Disk space running low (85%).

Critical Error

Kernel panic detected. Abort.

Note

Just a regular white box note.

04 Dismissible

Pass an onDismiss handler to render a close button.

Dismiss Logic

System Notification

I will disappear smoothly when you click the close button.

05 Real World Example

Custom Error

SYSTEM FAILURE

Critical process died unexpectedly.

ERROR_CODE: 0xDEADBEEF

> Attempting reboot...

> Reboot failed.

Props API

Prop	Type	Default	Description
title	string	undefined	Bold header text for the alert.
variant	"info" \| "success" \| "warning" \| "error" \| "neutral"	"neutral"	Controls color scheme and default icon.
icon	ElementType	Auto	Override the default icon. Pass `null` to hide.
onDismiss	() => void	undefined	If provided, renders a close button that triggers this function.