overlayssheet

Sheet

Slide-in panel overlay from any screen edge with structured content slots.

Import#

import { Sheet } from 'moraine'

Slot Structure#

Wrapper trigger with optional backdrop and a sliding panel with title, body, and footer slots.

trigger
├── overlay (optional)
└── content (portal)
    ├── header (optional)
    │   ├── wrapper (optional)
    │   │   ├── title (optional)
    │   │   └── description (optional)
    │   ├── actions (optional)
    │   └── close (optional)
    ├── body (optional)
    └── footer (optional)

Examples#

Variants#

Inset layout with custom close content or hidden close control.

1
function Variants() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Sheet
5
        inset
6
        title="Inset sheet"
7
        close={<span class="text-xs font-semibold">Done</span>}
8
        body="Inset sheet with custom close content."
9
      >
10
        <Button variant="secondary">Inset + custom close</Button>
11
      </Sheet>
12

13
      <Sheet title="No close button" close={false} body="Close button is hidden for this sheet.">
14
        <Button variant="outline">Close=false</Button>
15
      </Sheet>
16
    </div>
17
  )
18
}

Sides#

Open sheet from each side with shared shell slots.

1
function Sides() {
2
  const SIDES = ['left', 'right', 'top', 'bottom'] as const
3

4
  return (
5
    <div class="flex flex-wrap gap-3 items-center">
6
      <For each={SIDES}>
7
        {(side) => (
8
          <Sheet
9
            side={side}
10
            title={`Sheet ${side}`}
11
            description={`This sheet opens from ${side}.`}
12
            body={<p class="text-sm text-foreground">Body content from {side} side.</p>}
13
          >
14
            <Button variant="outline" size="sm">
15
              {side}
16
            </Button>
17
          </Sheet>
18
        )}
19
      </For>
20
    </div>
21
  )
22
}

Dismiss Control#

Prevent close on outside interaction and Escape while counting attempts.

1
function DismissControl() {
2
  const [preventedCloseCount, setPreventedCloseCount] = createSignal(0)
3

4
  return (
5
    <div class="flex flex-wrap gap-3 items-center">
6
      <Sheet
7
        defaultOpen
8
        dismissible={false}
9
        onClosePrevent={() => setPreventedCloseCount((value) => value + 1)}
10
        title="Persistent sheet"
11
        body={
12
          <p class="text-sm text-foreground">
13
            Prevented close attempts: <span class="font-medium">{preventedCloseCount()}</span>
14
          </p>
15
        }
16
      >
17
        <Button variant="outline">Dismiss blocked</Button>
18
      </Sheet>
19
    </div>
20
  )
21
}

API Reference#

Attributes#

Slottrigger0 attributes

Element users activate to open the sheet.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
action	`JSX.Element`	—	Additional action elements to render in the header.
body	`JSX.Element`	—	Custom element to render in the scrollable body slot.
children	`JSX.Element`	—	Trigger element that opens the sheet.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`SheetT.Classes \| undefined`	—	—
close	`boolean \| JSX.Element`	`true`	Whether to show a close button, or a custom element to use as one.
defaultOpen	`boolean \| undefined`	—	Initial open state when uncontrolled.
description	`JSX.Element`	—	Secondary description displayed below the title.
dismissible	`boolean \| undefined`	—	Whether outside interaction and Escape should dismiss the shell.
footer	`JSX.Element`	—	Custom element to render in the footer slot.
header	`JSX.Element`	—	Custom element to render in the header slot.
id	`string \| undefined`	—	Unique identifier used to derive the content id.
inset	`boolean \| undefined`	—	—
onClosePrevent	`(() => void) \| undefined`	—	Called when a dismissal attempt is blocked.
onOpenChange	`((open: boolean) => void) \| undefined`	—	Called whenever the open state changes.
open	`boolean \| undefined`	—	Controlled open state.
overlay	`boolean \| undefined`	—	Whether to render the overlay element.
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
side	`"bottom" \| "top" \| "right" \| "left" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`SheetT.Styles \| undefined`	—	—
title	`JSX.Element`	—	Primary title displayed in the sheet header.
transition	`boolean \| undefined`	`true`	Whether to enable transition animations.