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 Solid, Ark UI does not record that they read it.
Installation
Anatomy
Usage
<Dialog>
<DialogTrigger asChild={props => <Button {...props()} variant="outline">View Privacy Policy</Button>} />
<DialogContent class="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Privacy Policy</DialogTitle>
<DialogDescription>
Please review our privacy policy carefully.
</DialogDescription>
</DialogHeader>
<ScrollArea class="h-75 pe-4">
<div class="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 class="flex flex-col gap-2">
<h3 class="font-semibold">{section.title}</h3>
<p>{section.text}</p>
</section>)}
</div>
</ScrollArea>
<DialogFooter>
<DialogClose asChild={props => <Button {...props()}>I Understand</Button>} />
</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
Sets asChild and props. The rest is on the Dialog page.
Button
Sets props and 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.
