Components

Alert

Inline status callout with default and destructive variants, matching shadcn-style composition.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add alert to your project.

watermelon add alert
2

Import the component

Import Alert from your local UI registry output.

Import

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

Import

Import

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

Usage

Compose AlertTitle and AlertDescription inside Alert. Use variant="destructive" for errors.

Basic

Loading...

API Reference

Alert accepts a variant prop (default | destructive). Title and description inherit semantic colors from the variant on native and web.