Drawer

Overlay

Slide-in panel that anchors to any edge of the screen. Portal-based with 4 sides and 5 size options.

Import

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

Usage

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

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

<Drawer {open} onClose={() => (open = false)} side="right" size="md" title="Settings">
  <p>Drawer content goes here.</p>
  {#snippet footer()}
    <Button onclick={() => (open = false)}>Close</Button>
  {/snippet}
</Drawer>

Variants

Each button opens a drawer with a different direction and size combination.

Use Cases

Real-world drawer patterns: navigation menu, filters, shopping cart, and comments.

API Reference

PropTypeDefaultDescription
open boolean—Controls whether the drawer is visible.
onClose () => void—Callback fired when the backdrop is clicked or Escape is pressed.
side 'left' | 'right' | 'top' | 'bottom''right'Which edge the drawer slides in from.
size 'sm' | 'md' | 'lg' | 'xl' | 'full''md'Width (or height for top/bottom) of the drawer panel.
title stringundefinedOptional header title. Renders a close button alongside it.
children Snippet—Main scrollable content of the drawer.
footer SnippetundefinedOptional sticky footer slot rendered below the body.