React Alert Dialog - Information with Long Content
An informational alert dialog with scrollable content area for longer messages like policy updates with bulleted details
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes information doesn't fit in two sentences—privacy policies and feature lists need space. This React alert dialog uses max-h-60 overflow-y-auto on the description to create a scrollable content area that keeps the dialog height manageable while displaying bulleted lists and multi-paragraph text. Built with shadcn/ui and Radix UI, the contained scrolling ensures users on smaller screens can access all information without the dialog consuming their entire viewport. Perfect for terms of service updates, detailed changelog announcements, or any information dump requiring explicit acknowledgment but too lengthy for a toast.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-3.jsonRelated patterns you will also like
Simple Information Alert
Short content alternative
Information with Sections
Structured content layout
Standard Dialog
General dialog for custom layouts
Confirmation with Details
Similar scrollable pattern
Information with Icon
Icon variant for scanning
Scroll Area Component
Standalone scrolling patterns
Questions you might have
React Alert Dialog - Information with Icon
An informational alert dialog with an Info icon next to the title for enhanced visual identification and scannability
React Alert Dialog - Information with Action Button
An informational alert dialog with two action buttons offering users choice between dismissing or learning more