# Alert stack

> A vertical stack of informational, success, and destructive alerts with icons.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/alerts).

- Page, with a live preview: https://shadcn.exchange/r/quill/alerts
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/alerts-light-dc44a319dc8add6e.png
- Registry item: https://www.quilldesignsystem.com/r/alerts.json
- Categories: feedback
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/alerts.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `alert`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A vertical stack of informational, success, and destructive alerts with icons. Do: Match severity to consequence: destructive for blocking errors, default for neutral information. Don't: Use destructive styling for emphasis on non-error messages. Use sonner when the message is transient feedback about an action just taken — use a toast, not an inline alert. Use announcement-banner when the message is site-wide and dismissible rather than local to a page section. Use empty-state when the "message" is really an empty view that needs an explanation and a call to action.

## Files

### `registry/blocks/alerts.tsx`

```tsx
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Icon } from '@/components/ui/icon'

/** A vertical stack of informational, success, and destructive alerts with icons. */
export function Alerts() {
  return (
    <div className="flex max-w-lg flex-col gap-4">
      <Alert>
        <Icon name="info" size={18} />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>Your trial ends in 3 days — upgrade to keep your projects.</AlertDescription>
      </Alert>
      <Alert>
        <Icon name="check_circle" size={18} />
        <AlertTitle>Changes saved</AlertTitle>
        <AlertDescription>Your profile has been updated successfully.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <Icon name="warning" size={18} />
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>We couldn’t process your card. Update your billing details.</AlertDescription>
      </Alert>
    </div>
  )
}
```