# Shadcn Comment Mention

> User message notification alert

- Type: example, free and open source (MIT)
- Component: [Alert](https://reui.io/components/alert.md)
- Page: https://reui.io/components/alert/c-alert-20
- Docs (Base UI): https://reui.io/docs/components/base/alert.md
- Docs (Radix UI): https://reui.io/docs/components/radix/alert.md
- MCP: `get_example("c-alert-20")`
- Registry item: https://reui.io/r/styles/base-nova/c-alert-20.json
- Uses: Alert, Avatar, Button, Frame

## Best for

A comment mention on the dark invert surface, with avatar, dimmed action text and a blue View button

## Agent notes

- The leading column is sized only for a direct `svg`, so the `Avatar` relies on the custom grid columns in the `Alert` className
- The `AvatarImage` photo, sender name and quoted comment are sample data to map from your notifications
- View is painted with raw `bg-blue-500` and `text-white` classes that skip your theme tokens

## When not to use

- A message notice on the default card surface with Reply beside View: use [Direct Message](https://reui.io/components/alert/c-alert-19.md) (`get_example("c-alert-19")`)

## Install

```bash
npx shadcn@latest add @reui/c-alert-20
```

## About Shadcn Alert

### When to use

- Inline status messages in the page for success, info, warning and error outcomes
- Notices that offer a next step, such as a security update, a renewal reminder or a plan upgrade
- Status rows set inside a Frame panel, such as service health, deploy results and message notifications

### When not to use

- A yes or no decision that must be answered before the page goes on: use [Alert Dialog](https://reui.io/components/alert-dialog.md) (`get_component("alert-dialog")`)
- A brief confirmation that floats in a corner and disappears by itself: use [Sonner](https://reui.io/components/sonner.md) (`get_component("sonner")`)
- A complete modal task, such as a plan cancellation form that holds a warning banner: use the [Dialog blocks](https://reui.io/blocks/application/dialog.md)

### Agent notes

- Every `Alert` sets `role` alert, an assertive live region; pass `role` status for a notice that is not urgent
- `AlertTitle` carries a 1 line clamp by default, so copy longer than a heading goes in `AlertDescription`
- `Alert` has no open state or close part, so a Dismiss button must unmount it from state you own

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.