Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sheet with Scrollable Content
Sheet component with flex-1 and overflow-y-auto for vertical scrolling of long item lists within fixed sheet dimensions built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Lists get long—scrolling keeps sheets manageable. This React Sheet displays 20 items in a scrollable container using flex-1 and overflow-y-auto from shadcn/ui. Built with Radix UI Dialog primitives, the pattern constrains list height while allowing smooth vertical scrolling. Perfect for item lists, search results, file browsers, notification feeds, or any interface displaying many items without overwhelming users with unbounded vertical growth.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Sheet with Sticky Header/Footer
Sticky sections with scrollable content
Sheet with Sections
Header, content, footer structure
ScrollArea
Styled scrollable container
Notification List Sheet
Scrollable notification feed
Dialog
Modal dialog component
Card
Card container component
Questions you might have
React Sheet with Tabs
Sheet component with tab navigation allowing users to switch between multiple content sections within the same sheet built with shadcn/ui
React Sheet with Action Buttons in Footer
Sheet component with SheetFooter containing multiple action buttons including Save Draft and Create Task for flexible user workflows built with shadcn/ui