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 Vue, Ark UI does not record that they read it.
Installation
Anatomy
Usage
<Dialog>
<DialogTrigger :asChild="true">
<Button variant="outline">View Privacy Policy</Button>
</DialogTrigger>
<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>
<section v-for="section in sections" class="flex flex-col gap-2" :key="section.title">
<h3 class="font-semibold">{{ section.title }}</h3>
<p>{{ section.text }}</p>
</section>
</div>
</ScrollArea>
<DialogFooter>
<DialogClose :asChild="true"><Button>I Understand</Button></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
Sets asChild. 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.
