shadcn.io is an independent project built on shadcn/ui
View Privacy Policy opens a dialog titled Privacy Policy. A short intro and four sections scroll in a fixed-height area. The title stays above that area, and I Understand stays below it.
Use it for a policy people should see before they continue. A document they may save belongs on a page. A Sheet leaves more of the page visible. In React, Base UI does not record that they read it.
Installation
Anatomy
Usage
<Dialog>
<DialogTrigger render={<Button variant="outline" />}>
View Privacy Policy
</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Privacy Policy</DialogTitle>
<DialogDescription>
Please review our privacy policy carefully.
</DialogDescription>
</DialogHeader>
<ScrollArea className="h-75 pe-4">
<div className="flex flex-col gap-4 text-sm">
<p>
We respect your privacy and are committed to protecting your
personal data. This privacy policy will inform you about how we look
after your personal data when you visit our website.
</p>
{sections.map((section) => (
<section className="flex flex-col gap-2" key={section.title}>
<h3 className="font-semibold">{section.title}</h3>
<p>{section.text}</p>
</section>
))}
</div>
</ScrollArea>
<DialogFooter>
<DialogClose render={<Button />}>I Understand</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>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.
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
Scroll Area
No extra props in this demo. The rest is on the Scroll Area page.
