Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dialog - Scrollable
A dialog with ScrollArea for displaying long content like terms of service or privacy policies
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Legal documents and long-form content don't fit in standard dialogs. This React dialog combines shadcn/ui's Dialog and ScrollArea components for scrollable content areas with fixed header and footer. Users read privacy policies, terms of service, or help documentation without dialog overflow—perfect for legal agreements, documentation, or detailed information requiring scroll while keeping actions visible.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Dialog
Basic modal dialog structure
ScrollArea Component
Custom scrollbar container
Form Dialog
Dialog with form inputs
Sheet Component
Side panel with scrollable content
Accordion Component
Collapsible content sections
Dialog with Tabs
Multi-section dialog content
Questions you might have
React Dialog - Onboarding
A multi-step onboarding dialog with progress indicators, media content, and skip functionality for user introduction flows
React Dialog - Scrollable with Sticky Header
A scrollable dialog with sticky header that remains visible while content scrolls, perfect for changelogs and updates