# Alert

> Callout for statuses and important messages.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/alert.json`

## Install

```tsx
import { Alert, AlertTitle, AlertDescription } from "@aspyn-io/kit";
```

### Default

```tsx
<Alert>
  <AlertTitle>Scheduled maintenance</AlertTitle>
  <AlertDescription>
    The API will be read-only on Sunday from 02:00–04:00 UTC.
  </AlertDescription>
</Alert>
```

### With icon

A leading icon is placed in its own column; the title and description align beside it.

```tsx
<Alert>
  <InfoIcon />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Component pages now include full examples.</AlertDescription>
</Alert>
```

### Destructive

```tsx
<Alert variant="destructive">
  <AlertTriangleIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>Your card was declined.</AlertDescription>
</Alert>
```

## Notes

- Inherited from shadcn/ui. Variants: default and destructive.
- Alert renders role="alert" so screen readers announce it immediately: reserve it for genuinely important messages.