Alert

A callout for drawing attention to a short, important message.

Updated 2026-06-04

Default

<Alert class="max-w-md text-left">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>

A callout for drawing attention to a short, important message.

Installation

railbase ui add alert

Peer dependencies:

npm install class-variance-authority

Usage

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

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

Anatomy

Exported parts: alertVariants · Alert · AlertTitle · AlertDescription