shadcn.io is an independent project built on shadcn/ui
UI library: Ark UI
The check sits in a tinted circle. The description says the account was created. Get Started does not open a next screen. No account was created.
Center the icon when the result is the whole message. A side icon fits a receipt. The next screen can be a Button in the page. In Svelte, Ark UI does not create the account.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()}>Complete Action</Button>{/snippet}</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader class="sm:place-items-center sm:text-center"><div class="mb-2 flex size-12 items-center justify-center rounded-full bg-success/10"><CircleCheckIcon aria-hidden="true" class="size-6 text-success" /></div><AlertDialogTitle>Account Created!</AlertDialogTitle><AlertDialogDescription>Your account has been created successfully. You can now start using all features.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose>{#snippet asChild(props)}<AlertDialogAction {...props()}>Get Started</AlertDialogAction>{/snippet}</AlertDialogClose></AlertDialogFooter></AlertDialogContent></AlertDialog>FAQ
Centered or inline icon?
Centered for milestones: account created, first purchase. Inline for routine completions, as in Success with Icon.
How does it look in dark mode?
bg-success/10 and text-success are theme tokens with their own dark values, so there's nothing extra to add.
API Reference
Alert Dialog
Sets props. The rest is on the Alert Dialog page.
Button
Sets props. The rest is on the Button page.
