Alert

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/alert.json

npx shadcn@latest add https://prototyper-ui.com/r/alert.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/alert.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/alert.json

This will add the following files to your project:

• components/ui/alert.tsx

Usage

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>;

Anatomy

<Alert>
  <Icon />
  <div>
    <AlertTitle />
    <AlertDescription />
  </div>
</Alert>

Examples

Destructive

Success

Warning

Styling

Data Slots

Use data-slot attributes to target specific parts of the alert:

Customization Examples

/* Make all alerts have a thicker left border */
[data-slot="alert"] {
  @apply border-l-4;
}

{
  /* Override styles via className */
}
<Alert className="border-l-4">
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>With left accent border.</AlertDescription>
</Alert>;

API Reference

Alert

The root container with variant styles and role="alert".

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

AlertTitle

Heading for the alert message.

Extends React.ComponentProps<"h5">. All standard h5 props are forwarded via ...props.

AlertDescription

Supporting text rendered below the title.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

alertVariants

A cva helper exported for use outside of the <Alert> component.

Accessibility

Keyboard Interactions

Alert is a non-interactive presentational element and does not have keyboard interactions.

ARIA Attributes

• Alert renders with role="alert", which causes screen readers to announce the content when it appears.
• For non-urgent notifications, consider using role="status" instead.

Related