Question 1

What is a shadcn alert?

Accepted Answer

A shadcn alert is an inline banner component that calls out status, context, or action needed — errors, warnings, success confirmations, informational notices. It's built on the shadcn/ui Alert primitive (semantic `role="alert"`, optional icon, title, and description slots) and styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file — copy, paste, and ship.

Question 2

Are these alert examples free?

Accepted Answer

Yes. Every alert example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

How are these different from the raw shadcn/ui Alert primitive?

Accepted Answer

The primitive gives you Alert, AlertTitle, and AlertDescription — the atomic building blocks. These examples compose those primitives into complete, opinionated patterns: five semantic variants (error, warning, success, info, standard), icon-led layouts, alerts with inline actions, dismissible banners, and title-only versus title+description versus title+description+action arrangements. You still own the code, but each pattern is a concrete starting point rather than a blank slate.

Question 4

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

Accepted Answer

Use an alert for persistent, in-flow status — a form validation summary, an account-wide warning at the top of a page, a billing failure banner. Use a toast (Sonner) for transient feedback that auto-dismisses — "Saved", "Copied to clipboard". Use a dialog when the content demands a user decision before they can continue. Alerts live inside the page layout; toasts float on top; dialogs interrupt. Pick by persistence and urgency.

Question 5

Which alert variant should I use for form validation?

Accepted Answer

Use the error variant for failed validation summaries above the form ("Please fix the 3 errors below"), and the warning variant for non-blocking issues ("Your password is weak but accepted"). For success — the "Account created" confirmation after a successful submit — the success variant with a check icon reads clearly. Reserve the info variant for context that isn't an error or a success, like "Your trial ends in 5 days."

Question 6

How do I build a dismissible alert?

Accepted Answer

Wrap the Alert in a local useState that toggles visibility, and add a small X button inside the alert that calls setIsOpen(false). For persistence across reloads, back the state with localStorage keyed by alert ID. The examples in this gallery ship a static version; the dismissible pattern is a 5-line upgrade that keeps the same visual treatment.

Question 7

What's the difference between title-only, title+description, and title+description+action?

Accepted Answer

Title-only alerts are the tightest — use them for one-line status like "Saved to drafts". Title+description adds context ("Saved to drafts. Published version is from March 1."). Title+description+action adds a button like "Publish now" or "Restore" — useful when you want the user to act on the alert. Pick the densest variant that fits; empty description slots waste vertical space.

Question 8

Can I use custom icons instead of the default variant icons?

Accepted Answer

Yes — the Alert primitive doesn't mandate an icon. Drop any Lucide React icon (or your own SVG) as the first child of Alert, sized at h-4 w-4 to match the default. The examples in this gallery use AlertCircle for errors, CheckCircle2 for success, Info for informational, and AlertTriangle for warnings — swap them out for any icon that matches your product's visual language.

Question 9

How do I install an alert example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/alert/…`, plus the shadcn/ui Alert primitive if you don't already have it. From there it's regular React code — modify the variant, icon, copy, or layout in place.

Question 10

What React and Next.js versions do these examples support?

Accepted Answer

React 19+ and Next.js 14+ are the baseline. Alerts are render-only — they don't hold interactive state beyond an optional dismiss — so most examples work fine as Server Components. Pages Router is supported too, but you may need to adjust the `~/` import alias depending on your tsconfig paths setup.

Question 11

How do I customise the alert colors per variant?

Accepted Answer

The shadcn/ui Alert uses CSS variables (`--destructive`, `--success`, etc.) referenced via Tailwind's semantic utility classes. Override the variables in your global.css under `:root` and `.dark` scopes — the new values cascade into every alert automatically. To add a brand-specific variant (like "neutral" or "highlight"), extend the `alertVariants` cva config in `components/ui/alert.tsx` and add a matching color token.

Question 12

Can I trigger an alert programmatically after an action?

Accepted Answer

Use useState to track alert visibility and useEffect to react to an action's result. For transient alerts that should auto-dismiss, pair with setTimeout in useEffect. For a stream of notifications that stack, switch to the shadcn/ui Sonner (toast) component — alerts are designed for persistent, in-layout status, not for ephemeral notifications. If you need dozens of short-lived messages, that's a sign you want a toast stack, not an alert.

Question 13

Which libraries do alert examples depend on?

Accepted Answer

shadcn/ui Alert (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling + the variant color tokens), class-variance-authority (the variant API), and Lucide React (icons). No extra state library — alerts render from props. TypeScript is assumed. React 19 is the baseline. Some examples add motion/react for entrance animation; that's optional.

Question 14

Are alert examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Every Alert uses `role="alert"` by default, which makes screen readers announce the content when it enters the DOM. For critical messages, use `role="alert"` + `aria-live="assertive"`; for less-urgent status, `aria-live="polite"` defers announcement until the current reading is done. The icon is marked `aria-hidden="true"` because it's decorative — the title and description text carry the actual information for assistive tech.

Question 15

Can I use these alert examples with React Server Components?

Accepted Answer

Yes — most alert examples render from static props and have no state, so they work fine as Server Components. The exceptions are dismissible alerts (need useState) and alerts with form-validation state (need a client boundary). Wrap those leaves in `"use client"`; keep everything else on the server for zero JS cost.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The variant color tokens (destructive, success, warning, info) are declared identically under both versions, just in different config locations.

React Alert Examples for shadcn/ui

Browse every alert example

Frequently Asked Questions