mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 07:34:11 +00:00
62 lines
1.1 KiB
Plaintext
62 lines
1.1 KiB
Plaintext
---
|
|
title: Alert
|
|
description: Displays a callout for user attention.
|
|
component: true
|
|
---
|
|
|
|
<ComponentExample src="/components/examples/alert/demo.tsx">
|
|
<AlertDemo />
|
|
</ComponentExample>
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx shadcn-ui add alert
|
|
```
|
|
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="manual-installation">
|
|
<AccordionTrigger>Manual Installation</AccordionTrigger>
|
|
<AccordionContent>
|
|
|
|
1. Copy and paste the following code into your project.
|
|
|
|
<ComponentSource src="/components/ui/alert.tsx" />
|
|
|
|
</AccordionContent>
|
|
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
|
```
|
|
|
|
```tsx
|
|
<Alert>
|
|
<Terminal className="h-4 w-4" />
|
|
<AlertTitle>Heads up!</AlertTitle>
|
|
<AlertDescription>
|
|
You can add components and dependencies to your app using the cli.
|
|
</AlertDescription>
|
|
</Alert>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<ComponentExample src="/components/examples/alert/demo.tsx">
|
|
<AlertDemo />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Destructive
|
|
|
|
<ComponentExample src="/components/examples/alert/destructive.tsx">
|
|
<AlertDestructive />
|
|
</ComponentExample>
|