Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Success

Success with Celebration Alert Dialog for React

A success dialog that celebrates a milestone with an icon and an achievement card.

Framework
UI library

Some wins are bigger than a checkmark: 100 tasks done. This React alert dialog celebrates with a party icon in a tinted circle and an Achievement Unlocked card on a soft primary gradient. It's shadcn.io's Alert Dialog on Base UI, colored with the theme's primary token.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When is a celebration better than a plain success?

For rare milestones most people won't reach every day. Celebrating routine completions wears the effect out.

How is the card styled?

bg-linear-to-r from-primary/10 to-primary/5, a soft wash of the theme's primary color that works in light and dark mode. Keep it subtle in a serious product.

Which icon suits a celebration?

A party popper for playful milestones, a trophy for competitive ones, a cake for anniversaries. It sits in a size-12 bg-primary/10 circle and is aria-hidden.

What should the achievement say?

A category label, Achievement Unlocked, and a memorable name, Century Club. Names people would share work better than Congratulations.

What should the button say?

Something that matches the moment, like Awesome!, rather than OK.

Does Awesome! close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

All 39 alert dialog examples