Sheet

Extends the Dialog component to display content that complements the main screen.

Preview & Interactive Laboratory

Directional Control

Premium Hub Example

Usage & Implementation

import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right" variant="glass">
    Content here...
  </SheetContent>
</Sheet>

React / Tailwind

Granular Customization

Content

The slide-out panel.

className={`variant='glass' side='left'|'right'|'top'|'bottom'`}

Header

Standardized padding and typography for headers.

className={`className`}

Footer

Auto-bottom aligned action area.

className={`className`}

API Reference (Props)

Prop	Type	Default	Description
variant	'default' \| 'glass'	'default'	The visual style of the sheet.
side	'top' \| 'right' \| 'bottom' \| 'left'	'right'	The direction the sheet slides from.
showCloseButton	boolean	true	Whether to show the close icon button.