Shadcn.io is not affiliated with official shadcn/ui
Success with Everything
A complete success alert with icon, title, description, and action buttons for maximum positive clarity and engagement
This is the full success celebration experience. CircleCheck icon from Lucide React, clear title, helpful description, and action buttons working together in shadcn/ui's green success styling (border-success/80, bg-success/5, text-success). Built with flex-row items-start gap-3 for icon alignment and translate-y-0.5 for optical centering, this pattern delivers every element for prominent achievement announcements. Perfect for major milestone completions, payment confirmations, account activations, or significant positive outcomes where maximum visibility, context, and optional engagement are essential to properly celebrate user success.
Success with Everything preview
Installation
Related Components
Success with Description and Actions
Full success without icon
Success with Title
Minimal success baseline
Error with Everything
Error variant fully featured
Info with Everything
Info variant fully featured
Warning with Everything
Warning variant fully featured
Success with Actions
Success with action buttons
FAQ
Was this page helpful?
Sign in to leave feedback.
Success with Title, Description, and Action
A comprehensive success alert combining title, description, and action buttons for complete positive messaging with context and engagement
Warning with Title
A minimal warning alert with just a title for simple cautionary notifications without detailed explanations