Sheet
A panel that slides up from the bottom of the screen for extra actions, details or a short form.Short form
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, Sheet } from '@advui/core'
<Sheet>
<Sheet.Trigger>
<Button variant="outline">Edit profile</Button>
</Sheet.Trigger>
<Sheet.Content>
<Sheet.Header>
<Sheet.Title>Edit profile</Sheet.Title>
<Sheet.Description>Visible to your team.</Sheet.Description>
</Sheet.Header>
…
<Sheet.Footer>
<Sheet.Close>
<Button variant="outline">Cancel</Button>
</Sheet.Close>
<Button>Save</Button>
</Sheet.Footer>
</Sheet.Content>
</Sheet>Examples
Snap points and scrolling
Opens at 85% of the screen and snaps to half height when dragged down.Preview
Code
API reference
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. |
defaultOpen | boolean | — | Starting `open` when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the sheet opens or closes. |
Sheet.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactElement | — | One pressable element, usually a Button. It toggles the sheet. |
Sheet.Content
| Prop | Type | Default | Description |
|---|---|---|---|
snapPoints | number[] | — | Heights in % of the screen, largest first (e.g. `[85, 50]`). Default: fit the content. |
dismissible | boolean | true | Close on swipe down and on a press outside. Escape always closes on web. |
hideCloseButton | boolean | false | Hide the × button. Keep another way to close. |
Sheet.Title
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | Heading that names the sheet for screen readers. |
Sheet.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Supporting text. |
Sheet.Close
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactElement | — | One pressable element that closes the sheet. |
Sheet.ScrollView
Scrolls long content; use it with `snapPoints`.Sheet.Header
Stacks the title and description at the top.Sheet.Footer
A row of actions at the bottom.Accessibility
- The panel is a modal
dialognamed bySheet.Titleand described bySheet.Description; the trigger exposesaria-haspopup="dialog"andaria-expanded. - On web focus moves into the sheet, stays inside while it is open and returns to the trigger when it closes.
- A labelled × button closes it, so nobody has to swipe. Escape closes it on web.
- On iOS the sheet is a modal view for VoiceOver, which keeps focus inside it.
| Key | Action |
|---|---|
| Enter / Space | Opens the sheet from its trigger. |
| Tab / Shift + Tab | Moves focus through the sheet. |
| Esc | Closes the sheet and returns focus to the trigger. |
Responsive behavior
Full width on phones. On wider screens the content is centred and capped at $168 (672px). Footer buttons stack below the sm breakpoint.
Platform notes
Web
Slides up over a dimmed page and locks page scroll.
iOS
Swipe down on the handle or content to close.
Android
Swipe down or use the back gesture to close.