Shadcn.io is not affiliated with official shadcn/ui
Information with Centered Icon
An informational alert dialog with a large centered icon in a colored circle for high-impact tips and educational moments
Sometimes information deserves ceremony—tips and tricks that unlock efficiency need visual weight. This React alert dialog centers a Lightbulb icon inside a yellow circular background above the title, creating a friendly educational moment. Built with shadcn/ui and Radix UI with items-center on the header and text-center on the description, the symmetrical layout emphasizes the Pro Tip message. Perfect for onboarding tips, keyboard shortcut education, or any aha-moment insight where you want users to pause and internalize helpful information rather than reflexively clicking past.
Information with Centered Icon preview
Installation
Related Components
Information with Icon
Inline icon alternative
Simple Information Alert
Minimal styling alternative
Success with Centered Icon
Similar centered icon pattern
Information with Badge
Alternative visual emphasis
Keyboard Key Component
Kbd element styling patterns
Standard Dialog
General dialog for custom content
FAQ
Was this page helpful?
Sign in to leave feedback.