Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Long Content Alert Dialog for React

An informational dialog with long content that scrolls inside the dialog.

Framework
UI library

Some information doesn't fit in two sentences. This React alert dialog announces a privacy policy update with a list of key changes in an area that scrolls inside the dialog, so the button stays in reach. It's shadcn.io's Alert Dialog on Base UI.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How tall should the scrolling area be?

max-h-60 shows several lines before scrolling while leaving room for the title and button on small screens.

How is the scrolling built?

The content sits in a div with max-h-60 overflow-y-auto, between the header and the footer, so only it scrolls.

List or paragraphs?

Both: a short lead-in, a list for the key points, a closing paragraph. Use real ul and li elements.

Should the button wait until people scroll to the end?

Rarely; for information, no. For terms people must accept, see the Terms and Conditions dialog example.

How much content is too much?

If it takes more than half a minute to read, link to a page and keep the dialog to a summary.

Does I Understand close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

All 39 alert dialog examples