shadcn.io is an independent project built on shadcn/ui
The title is All Items, with the line Browse through all available items. Twenty rows, Item 1 through Item 20, each with a short description, scroll inside the panel.
Use it for a long list that should not scroll the page behind it. A Scroll Area adds a styled scrollbar if you want one. In Vue, Ark UI does not page this list.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger :asChild="true"><Button>View All Items</Button></SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>All Items</SheetTitle>
<SheetDescription>Browse through all available items</SheetDescription>
</SheetHeader>
<div class="flex-1 overflow-y-auto p-4">
<ul class="flex flex-col gap-3">
<li v-for="item in ITEMS" class="rounded-md border p-3 hover:bg-muted" :key="item.id">
<h4 class="font-medium text-sm">{{ item.title }}</h4>
<p class="text-muted-foreground text-xs">{{ item.description }}</p>
</li>
</ul>
</div>
</SheetContent>
</Sheet>FAQ
Which part of the sheet scrolls?
Only the body: it has flex-1 overflow-y-auto, so it takes the height left under SheetHeader and scrolls inside it. The title stays in view.
Where do the 20 items come from?
A static array built once at module scope, each with an id, a title and a description. Replace it with your data and keep a stable key for each row.
Does the page scroll behind the sheet?
No. A modal sheet locks the page's scroll while it's open and restores it on close.
Are the rows clickable?
No, they're list items with a hover background only. Make each one a button or a link if picking an item should do something.
API Reference
Sheet
Sets asChild. The rest is on the Sheet page.
Button
No extra props in this demo. The rest is on the Button page.
