Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Sheet
A panel that slides out from any edge of the screen, typically used for navigation menus, settings forms, and detail views. Unlike Drawer, Sheet does not include a drag handle and is designed for desktop-first interactions.
Right
A
Sheet that slides in from the right side, which is the default Side. This example includes a SheetHeader with title and description, form fields for editing, and a SheetFooter with a save button. The sheet overlay and close button are rendered automatically.
Loading example…
Left
Set
Side to SheetSide.Left to slide the sheet in from the left edge. This direction is commonly used for app navigation sidebars, mimicking the drawer-from-left pattern users expect from many web and mobile applications.
Loading example…
Top
Set
Side to SheetSide.Top to slide the sheet down from the top edge. This direction is well-suited for notification settings, search overlays, or banner-style panels that drop down over the page content.
Loading example…
Bottom
Set
Side to SheetSide.Bottom to slide the sheet up from the bottom edge, similar to a mobile bottom sheet. This direction works well for share dialogs, quick actions, and other compact content that benefits from a bottom-anchored position.
Loading example…
Custom Variant
Use the
Class parameter on SheetContent to apply custom Tailwind CSS for project-specific styling. This example uses a gradient background and custom width to create a branded settings panel that matches your application's design system.
Loading example…