shadcn.io is not affiliated with official shadcn/ui
Sheet examples · Multi Section
Sheet with Scrollable Content for React
A right-side sheet whose list of 20 items scrolls inside the panel while the header stays put.
A long list in a sheet. The body takes the free height with flex-1 and scrolls with overflow-y-auto, so the 20 items scroll inside the panel while SheetHeader stays at the top. The page behind doesn't scroll while the sheet is open.
Preview
Installation
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.
Related
- Sheet with Sticky Header and FooterA right-side product sheet whose middle
- Sheet with Header, Content, and FooterA right-side sheet in three parts: a
- Basic ScrollArea Scroll AreaA basic vertical scroll area for long
- Notification List SheetA right-side sheet listing notifications
- Standard DialogA share dialog with a read-only link, a
- Standard CardA basic card with a title, a description