Information with Long Content

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.

Information with Long Content preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/alert-dialog-informational-3.json

npx shadcn@latest add https://www.shadcn.io/r/alert-dialog-informational-3.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/alert-dialog-informational-3.json

bunx shadcn@latest add https://www.shadcn.io/r/alert-dialog-informational-3.json

Related Components

FAQ