Shadcn.io is not affiliated with official shadcn/ui
Information with Icon
An informational alert dialog with an Info icon next to the title for enhanced visual identification and scannability
Icons speak faster than words—especially when users are scanning quickly. This React alert dialog adds a blue Info icon (from Lucide React) next to the title to instantly signal this is informational, not destructive or critical. Built with shadcn/ui and Radix UI, the flex items-center gap-2 layout keeps icon and title aligned beautifully. Perfect for feature announcements, tips and tricks, or any neutral information where the visual Info symbol helps users categorize the message type before reading details.
Information with Icon preview
Installation
Related Components
Simple Information Alert
Minimal alert without icon
Information with Details
Alert with additional content
Confirmation with Icon
Icon usage in confirmation context
Success with Icon
Success variant with icon
Information with Large Icon
Centered icon variant
Standard Dialog
General dialog for custom content
FAQ
Was this page helpful?
Sign in to leave feedback.