Data & feedback@neumorphism-ui/alert

Alert

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.

@neumorphism-ui/alert

Registry JSON

Preview

New Registry version

Reinstall the local source to review the changes.

Sync complete

All 56 components match the current project.

Tokens not found

Install the base item in globals.css first.

Installation

npx shadcn@latest add @neumorphism-ui/alert

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<Alert variant="success">
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg>
  <AlertTitle>Changes saved</AlertTitle>
  <AlertDescription>
    Your changes are now available to every team member.
  </AlertDescription>
</Alert>

API Reference

Component	Prop	Type	Default	Description
`Alert`	`variant`	`"default" \| "success" \| "destructive"`	`"default"`	Selects the semantic meaning and visual treatment of the message.
`Alert`	`children`	`React.ReactNode`	`—`	Arranges the icon, AlertTitle, and AlertDescription.
`Alert`	`className`	`string`	`—`	Extends the default surface styles.