React Alert Dialog - Information with Centered Icon
An informational alert dialog with a large centered icon in a colored circle for high-impact tips and educational moments
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-5.jsonRelated patterns you will also like
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
Questions you might have
React Alert Dialog - Information with Action Button
An informational alert dialog with two action buttons offering users choice between dismissing or learning more
React Alert Dialog - Information with Status Badge
An informational alert dialog with a status badge below the title for categorizing message urgency or type