---
title: Sheet
description: Present a focused drawer from a viewport edge.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---
# Sheet
> Present a focused drawer from a viewport edge.
Use Sheet for a focused drawer from a viewport edge, such as mobile navigation or an inspector. It shares modal dismissal and focus behavior with its overlay family.
## Basic usage
```tsx
import { Button, Sheet } from 'moraine'
export function Example() {
return (
OpenSheet contentDone
)
}
```
## Anatomy
```text
Sheet [component; no DOM]
├── Sheet.Trigger [part; slot=trigger]
├── Sheet.Close [part]
├── overlay [slot]
└── Sheet.Content [part; slot=content]
├── Sheet.Header [part; slot=header]
│ ├── Sheet.Title [part; slot=title]
│ ├── Sheet.Description [part; slot=description]
│ └── Sheet.Action [part; slot=action]
├── contentClose [slot]
├── Sheet.Body [part; slot=body]
└── Sheet.Footer [part; slot=footer]
```
Content is portaled. Overlay and Content are siblings by default; scrollable overlay mode nests Content inside Overlay.
## Usage
### Content composition
Use Content `title` and `description` for simple cases:
```tsx
......
```
For a custom header layout, compose the anatomy parts:
```tsx
SettingsUpdate your account..........
```
An explicit `Sheet.Header` replaces the header generated by Content's `title` and `description`.
`Sheet.Title` and `Sheet.Description` connect their IDs to the surface's accessible name and description.
Without a visible title, supply root `ariaLabel` or native ARIA labeling on Content.
`Sheet.Action` places actions beside the title. `Sheet.Close` is an explicit close control you can
place inside the root; it is separate from Content's automatic corner close button.
Use root `close={false}` to hide the automatic close button, or `closeIcon` to replace its icon.
### Focus and outside interaction
`modal` defaults to `true`: focus stays inside the surface, outside content is hidden from assistive
technology, and native outside pointer actions are prevented. Closing restores focus to the trigger.
Setting `modal={false}` allows focus to leave the surface, but does not disable Escape or outside
dismissal. `dismissible` controls those close requests. Scroll locking is independent:
`preventScroll` defaults to `true`. For interaction with the background page, also set
`preventScroll={false}` and `overlay={false}`.
### Styling and portal placement
Apply `class` and object `style` directly to each rendered part. Root `classes` and `styles` set
slot defaults for the family; Content's slot maps cover only `overlay`, `content`, and `contentClose`.
See [Customization](https://moraine.subf.dev/docs/customization.md#the-4-layer-override-hierarchy) for precedence.
Set root `portalMount` to place Content in a chosen container. This also works for controlled
surfaces without a Trigger.
### Structured drawer
Choose the viewport edge with root `side`, and use `inset` when the drawer needs space around it.
Compose body and footer regions to keep the task content separate from its actions.
```tsx
import { Button, Sheet } from 'moraine'
export function DrawerUsage() {
return (
Open Settings Drawer
Place settings fields in this region and actions in the footer.
Cancel
Done
)
}
```
### State and dismissal
Use controlled open state when a layout owns visibility. Disable normal dismissal only when the sheet has a clear explicit close action; `onClosePrevent` receives blocked outside or Escape attempts.
```tsx
import { Button, Sheet } from 'moraine'
import { createSignal } from 'solid-js'
export function StateUsage() {
const [open, setOpen] = createSignal(false)
return (