An alert banner for displaying important messages with an icon, title, and description.

Alert

A banner component for displaying important messages to the user. Supports an icon, title, and description with a default and destructive variant.

Installation

npx @tapcn/cli add alert

Or using shadcn directly:

npx shadcn@latest add https://tapcn.vercel.app/r/alert.json

This will also install the icon and text components.

Usage

import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
import { Icon } from '~/components/ui/icon';
import { Terminal } from 'lucide-react-native';

export function Example() {
  return (
    <Alert icon={Terminal}>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

Destructive variant

import { AlertCircle } from 'lucide-react-native';

<Alert variant="destructive" icon={AlertCircle}>
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

Without icon

<Alert>
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>
    This is a simple alert without an icon.
  </AlertDescription>
</Alert>

Sub-Components

Component	Description
`Alert`	Root container with icon and variant styling
`AlertTitle`	The bold heading text
`AlertDescription`	The descriptive body text

Props

Alert

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	The visual style variant
`icon`	`LucideIcon`	--	Optional icon component to display
`className`	`string`	--	Additional NativeWind classes

Dependencies

icon -- for rendering the alert icon
text -- for TextClassContext
lucide-react-native -- icon library

Alert

On this page