Components
Alert

Alert Component

Installation

The Alert component provides contextual feedback messages for typical user actions.

Installation Command
npx @nativecn/cli add alert

Basic Variants

Alert Variants

Default Alert
This is a default alert — check it out!
Destructive Alert
This is a destructive alert — be careful!

With Icons

Alerts with Icons

Information
This alert includes an info icon.
Warning
This destructive alert includes a warning icon.

Custom Content

Alert with Custom Content

Success

Your changes have been successfully saved. The new settings will take effect immediately.

Complex Alert

Complex Alert with Rich Content

Notification
You have a new message from the system.

System maintenance will be performed tomorrow at 2:00 AM UTC.

Received 5 minutes ago

Usage Example

Basic Alert Usage with Responsive Mode
import { Alert, AlertTitle, AlertDescription } from '../components/ui/alert';
import { useColorScheme } from 'react-native';

export function InfoAlert() {
  // Automatically use the device's color scheme
  const colorScheme = useColorScheme();
  
  return (
    <Alert 
      icon="info"
      mode={colorScheme} // 'light' or 'dark' based on system preference
    >
      <AlertTitle mode={colorScheme}>Important Information</AlertTitle>
      <AlertDescription mode={colorScheme}>
        This is an important message for the user.
      </AlertDescription>
    </Alert>
  );
}

Reference

Alert Component Props
interface AlertProps {
  variant?: 'default' | 'destructive';
  className?: string;
  children: React.ReactNode;
  icon?: string; // Name of the Feather icon
  mode?: 'light' | 'dark';
  renderIcon?: (props: IconProps) => React.ReactNode;
}

interface AlertTitleProps {
  className?: string;
  children: React.ReactNode;
  mode?: 'light' | 'dark';
}

interface AlertDescriptionProps {
  className?: string;
  children: React.ReactNode;
  mode?: 'light' | 'dark';
}
AccordionAlert Dialog