Alert

Displays a callout for user attention.

@react.component
let make = () =>
  <div className="grid w-full max-w-md items-start gap-4">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Alert
Copy

Usage

Copy<Alert>
  <Icons.Info />
  <Alert.Title> {"Heads up!"->React.string} </Alert.Title>
  <Alert.Description>
    {"You can add components and dependencies to your app using the cli."->React.string}
  </Alert.Description>
</Alert>

Examples

Basic

A basic alert with an icon, title and description.

@react.component
let make = () =>
  <Alert className="max-w-md">

Destructive

Use variant=Destructive to create a destructive alert.

@react.component
let make = () =>
  <Alert variant=Alert.Variant.Destructive className="max-w-md">

Action

Use Alert.Action to add a button or other action element to the alert.

@react.component
let make = () =>
  <Alert className="max-w-md">

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

@react.component
let make = () =>
  <Alert

API Reference

Alert

The Alert component displays a callout for user attention.

AlertTitle

The AlertTitle component displays the title of the alert.

AlertDescription

The AlertDescription component displays the description or content of the alert.

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.