Default (Right)
Sides
Use Case: Mobile Navigation
Sub-components
| Component | Description |
|---|---|
| Sheet | Root provider (controls open/close state) |
| Sheet.Trigger | Element that opens the sheet |
| Sheet.Content | The slide-in panel (accepts side prop) |
| Sheet.Header | Header area for title and description |
| Sheet.Title | Accessible title text |
| Sheet.Description | Accessible description text |
| Sheet.Footer | Bottom area for actions |
| Sheet.Close | Element that closes the sheet |
Content Props
| Prop | Type | Description |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | Side the sheet slides in from (default: right) |
| className | string | Additional classes on the sheet content |
Usage
<Sheet>
<Sheet.Trigger asChild>
<Button>Open</Button>
</Sheet.Trigger>
<Sheet.Content side="right">
<Sheet.Header>
<Sheet.Title>Title</Sheet.Title>
<Sheet.Description>Description here.</Sheet.Description>
</Sheet.Header>
<div className="p-4">Content</div>
<Sheet.Footer>
<Button>Save</Button>
</Sheet.Footer>
</Sheet.Content>
</Sheet>