Sheet

Overlay

Bottom sheet with drag handle, swipe-to-dismiss, spring animation, and 4 size presets. Portal-based.

Import

ts 
import Sheet from '$lib/components/Sheet.svelte';

Usage

svelte 
<script lang="ts">
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open Sheet</Button>

<Sheet {open} onClose={() => (open = false)} title="Options" size="md">
  <p>Sheet content goes here.</p>
  {#snippet footer()}
    <Button onclick={() => (open = false)}>Confirm</Button>
  {/snippet}
</Sheet>

Sizes

sm (38vh) · md (56vh) · lg (78vh) · full (96vh). Drag the handle or tap the backdrop to dismiss.

Use Cases

Real-world sheet patterns: filter panel and iOS-style share sheet.

API Reference

PropTypeDefaultDescription
open boolean—Controls whether the sheet is visible.
onClose () => void—Callback fired when the backdrop is clicked, Escape is pressed, or the user swipes down past the dismiss threshold.
title stringundefinedOptional header title displayed with a close button.
size 'sm' | 'md' | 'lg' | 'full''md'Height of the sheet panel: sm (38vh), md (56vh), lg (78vh), full (96vh).
children Snippet—Scrollable body content.
footer SnippetundefinedOptional sticky footer rendered below the body.