Feedback & Overlays
Alert
An inline banner in 5 colors and 2 sizes, with an optional close button and action.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Alert,
AlertDescription,
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
AlertTitle,
} from "@wunderui/react"Examples
Plain
A neutral message.
Positive
Something worked.
Primary
Information worth noticing.
Negative
Something went wrong.
Warning
Something needs attention.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Status modals grid
Alerts as the status line of confirmation cards.