Question 1

What is the Alert?

Accepted Answer

shadcn.io's Alert is an inline banner that calls out a status in the page: an error, a warning, a success or a piece of information. It comes with AlertTitle, AlertDescription and AlertAction parts, an optional icon, and five variants: default, destructive, warning, success and info. Each example in this gallery is one small file built from those parts.

Question 2

Are these alert examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How are these different from the Alert component itself?

Accepted Answer

The component gives you the parts and the variants. The examples put them together into ready patterns: the same message as a title only, with a description, with buttons, and with an icon and everything, in each of the five tones. You still own the code and change any of it.

Question 4

When should I use an alert instead of a toast or a dialog?

Accepted Answer

An alert stays in the page for as long as the status holds: a billing problem, a form's errors, a plan about to expire. A toast is for brief feedback that goes away on its own, such as Saved. A dialog is for a decision the reader must make before going on. Pick by how long the message matters and how urgent it is.

Question 5

Which variant should I use?

Accepted Answer

Destructive for something that failed, warning for a risk the reader can still avoid, success for something that worked, info for news with no risk, and the default for neutral notes. The examples label the variants Error, Warning, Success, Info and Standard.

Question 6

How do I add buttons to an alert?

Accepted Answer

Put them in AlertAction, after the title and description. The alert pins them to its top corner, beside the title. The action examples pair a main button, such as Retry or View Details, with an outline Dismiss.

Question 7

Should my alert have an icon?

Accepted Answer

When it has to stand out among other content, yes: the icon tells the tone at a glance. Put any Lucide icon first inside the Alert; the alert sizes it, colors it for the variant and lines the text up beside it. The everything examples show one for each tone.

Question 8

How do I make an alert dismissible?

Accepted Answer

Keep whether it's shown in your own state, and add a Dismiss button in AlertAction that hides it. The alert has no close button of its own. To keep it closed after a reload, remember the choice in storage under the alert's id.

Question 9

How do I install an alert example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Alert component, and Button when the example has actions.

Question 10

How do I change the alert colors?

Accepted Answer

The variants read your theme's tokens: destructive, warning, success and info. Change those CSS variables, in light and dark, and every alert follows. To add a variant of your own, extend the variants in the alert file in your project.

Question 11

How do I show an alert after an action?

Accepted Answer

Keep the message in state and render the Alert when there is one, for example after a failed save. For a stream of short messages, use the Sonner toasts instead: alerts are for status that stays.

Question 12

Can I put links in an alert?

Accepted Answer

Yes. A link inside AlertTitle or AlertDescription is underlined and takes the foreground color on hover, so it stands out from the muted description.

Question 13

What are alert examples built on?

Accepted Answer

shadcn.io's Alert, with Button for actions, styled with Tailwind CSS and Lucide icons. In React the Button is built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 14

Are alert examples accessible?

Accepted Answer

Yes. The Alert has the alert role, so screen readers announce it when it appears. For news that isn't urgent, pass the status role instead, or none for an alert that is on the page from the start. Icons are hidden from screen readers because the title already says the tone, and actions are real buttons.

Question 15

Do the examples work with server rendering?

Accepted Answer

Yes. Alerts are static markup, so they render on the server. A dismissible alert needs state, so in Next.js that part is a client component.

Question 16

Which Tailwind CSS version do the examples use?

Accepted Answer

Tailwind CSS v4. The classes are standard utilities and theme tokens such as text-muted-foreground and the destructive, warning, success and info colors, read from your theme's CSS variables.

Alert Examples

Error with Everything

Error with Title

Error with Title and Action

Error with Title and Description

Error with Title, Description and Action

Info with Everything

Info with Title

Info with Title and Action

Info with Title and Description

Info with Title, Description and Action

Standard with Everything

Standard with Title

More component examples

Empty State

Progress

Skeleton

Sonner

Spinner

Alert Dialog

Aspect Ratio

Avatar

Alert examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every alert example. One prompt away.