shadcn.io is not affiliated with official shadcn/ui
Dialog examples · Standard
Scrollable Dialog for React
A privacy policy dialog whose long text scrolls in a fixed-height area between the header and the footer.
Framework
UI library
Long documents don't fit in a standard dialog. This React dialog shows a privacy policy in a fixed-height Scroll Area between the header and an I Understand button, so the title and the action stay in view. It's shadcn.io's Dialog on Base UI.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How tall should the scroll area be?
h-75 here. On small screens a viewport-relative height such as max-h-[60vh] keeps the dialog on screen.
How do people know it scrolls?
The scroll area shows its scrollbar while scrolling. A fade at the bottom edge adds a hint that there's more.
Does the footer stay visible?
Yes. Only the scroll area scrolls; the header and DialogFooter stay put, so I Understand is always in reach.
Related
- Standard DialogA share dialog with a read-only link, a
- Basic ScrollArea Scroll AreaA basic vertical scroll area for long
- Scrollable with Sticky Header DialogA changelog dialog whose header stays in
- Bottom-Sliding SheetA sheet that slides up from the bottom of
- Standard Accordion with ChevronA bordered accordion of three questions
- Terms and Conditions DialogA terms dialog whose I Agree button stays