Components

Alert

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

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

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.