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.
Standard with Title, Description, and Action
A comprehensive neutral alert combining title, description, and action buttons for complete messaging without semantic color coding
Success with Title
A minimal success alert with just a title for simple positive confirmation notifications without detailed explanations