shadcn.io is not affiliated with official shadcn/ui
Sheet examples · Multi Section
Sheet with Header, Content, and Footer for React
A right-side sheet in three parts: a header, a body that takes the free height, and a footer with Cancel and Continue.
The three parts a sheet usually has: SheetHeader with the title, a body with flex-1 that takes the free height, and SheetFooter with the actions. Cancel is a SheetClose; Continue is yours to wire up.
Preview
Installation
FAQ
How is the sheet split into header, body and footer?
SheetContent is a flex column. SheetHeader comes first, the body div has flex-1 so it fills the space in between, and SheetFooter sits last.
How does Cancel close the sheet?
It's wrapped in SheetClose, which dismisses the sheet when pressed.
Pass your button to SheetClose with render.
Does Continue do anything?
Not yet: it's a plain Button. Run your next step from it, and close the sheet by controlling its open state if that step leaves the panel:
Pass open to Sheet; onOpenChange receives the next boolean.
What if the body gets long?
Add overflow-y-auto to the body next to flex-1. The body then scrolls while the header and footer stay in place.
Related
- Sheet with Sticky Header and FooterA right-side product sheet whose middle
- Sheet with Action Buttons in FooterA right-side task sheet with name
- User Profile Edit SheetA right-side sheet for editing a username
- Standard DialogA share dialog with a read-only link, a
- Bottom-Sliding SheetA sheet that slides up from the bottom of
- Standard CardA basic card with a title, a description