Neumorphism UI

Alert

Use Alert for a message that should remain beside the relevant content, such as a save result or a warning.

Preview

Information, success, and error

Compare a registry update message, a successful sync, and missing-token feedback, each with its own icon and explanation.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/alert

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Combine AlertTitle and AlertDescription inside Alert. Choose a variant for the message's meaning and describe the result in text as well as color.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert variant="success">
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your workspace is up to date.</AlertDescription>
    </Alert>
  );
}

API Reference

A composable Alert that aligns an icon, title, and description. It provides default, success, and destructive variants, each combining color with border and text contrast.

ComponentPropTypeDefaultDescription
Alertvariant"default" | "success" | "destructive""default"Selects the semantic meaning and visual treatment of the message.
AlertchildrenReact.ReactNode—Arranges the icon, AlertTitle, and AlertDescription.
AlertclassNamestring—Extends the default surface styles.

Accessibility

  • 01

    Alert uses role=alert and is appropriate for important messages that appear dynamically.

  • 02

    Static guidance that is present on page load may not need the immediate announcement from role=alert; override the role or use another container when appropriate.

  • 03

    Mark decorative icons with aria-hidden=true and communicate the same meaning in the title and description.