shadcn.io is an independent project built on shadcn/ui
The header is centered. The description says 100 tasks were completed. The card reads Century Club. Those figures are static. Awesome does not grant anything.
Save this for a real milestone, not every save. A routine success is a Toast. In Solid, Ark UI does not count completed tasks.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild={props => <Button {...props()}>Complete Action</Button>} />
<AlertDialogContent>
<AlertDialogHeader class="sm:place-items-center sm:text-center">
<div class="mb-2 flex size-12 items-center justify-center rounded-full bg-primary/10">
<PartyPopperIcon aria-hidden="true" class="size-6 text-primary" />
</div>
<AlertDialogTitle>Milestone Achieved!</AlertDialogTitle>
<AlertDialogDescription>
Congratulations! You&aposFAQ
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.
API Reference
Alert Dialog
Sets asChild and props. The rest is on the Alert Dialog page.
Button
Sets props. The rest is on the Button page.
