Components
Alert

Alert Variants

The Alert component in sidcn is your go-to solution for displaying attention-grabbing alerts in your React Native and Expo applications. With a variety of variants to choose from, it seamlessly integrates into your app, making sure your users stay informed and engaged.

HelloHello

Add Alert

The primary variant is designed for the main action or call-to-action buttons.

npx sidcn add alert

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Alert

The primary variant is designed for the main action or call-to-action buttons.

import { Alert, AlertTitle, AlertDescription } from '/components/sidcn/ui/alert';

How to use

You can have Icon | Image | View | Text | Svg Component for Icon Purpose, Alert Title and Alert Description

<Alert variant="primary">
  <Image
    source={require('../assets/favicon.png')}
    style={{ width: 24, height: 24 }}
  />
  <AlertTitle>Alert Primary</AlertTitle>
  <AlertDescription>Alert Description</AlertDescription>
</Alert>

Use with className

<Alert variant="primary">
  <AlertTitle className="text-[20px]">Alert Primary</AlertTitle>
  <AlertDescription className="text-[20px]">Alert Description</AlertDescription>
</Alert>

Primary Variant

The primary variant is designed for the main action or call-to-action buttons.

<Alert variant="primary">
  <AlertTitle>Alert Primary</AlertTitle>
  <AlertDescription>Alert Description</AlertDescription>
</Alert>

Destructive Variant

The destructive variant is ideal for buttons indicating potentially harmful actions.

<Alert variant="destructive">
  <AlertTitle>Alert Destructive</AlertTitle>
  <AlertDescription>Alert Description</AlertDescription>
</Alert>
AccordionAvatar