Quickstart

Build your first drawer in under 5 minutes

Get started with Svelte Drawer by building a basic bottom drawer. This guide will have you up and running in minutes.

Basic Setup

1. Import Components

   Import the essential drawer components into your Svelte file:

   <script>
     import { 
       Drawer, 
       DrawerOverlay, 
       DrawerContent, 
       DrawerHandle 
     } from '@abhivarde/svelte-drawer';
   </script>
   
2. Create State

   Use Svelte 5’s $state rune to manage the drawer’s open/closed state:

   <script>
     import { 
       Drawer, 
       DrawerOverlay, 
       DrawerContent, 
       DrawerHandle 
     } from '@abhivarde/svelte-drawer';
   
     let open = $state(false);
   </script>
   

   Svelte Drawer is built for Svelte 5 and uses the new runes syntax. The $state rune creates reactive state.

3. Add Trigger Button

   Create a button to open the drawer:

   <script>
     import { 
       Drawer, 
       DrawerOverlay, 
       DrawerContent, 
       DrawerHandle 
     } from '@abhivarde/svelte-drawer';
   
     let open = $state(false);
   </script>
   
   <button onclick={() => open = true}>
     Open Drawer
   </button>
   
4. Build the Drawer

   Add the drawer structure with overlay, content, and handle:

   <script>
     import { 
       Drawer, 
       DrawerOverlay, 
       DrawerContent, 
       DrawerHandle 
     } from '@abhivarde/svelte-drawer';
   
     let open = $state(false);
   </script>
   
   <button onclick={() => open = true}>
     Open Drawer
   </button>
   
   <Drawer bind:open>
     <DrawerOverlay class="fixed inset-0 bg-black/40" />
     <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
       <DrawerHandle class="mb-8" />
       <h2>Drawer Content</h2>
       <p>This is a drawer component.</p>
       <button onclick={() => open = false}>Close</button>
     </DrawerContent>
   </Drawer>
   

   The bind:open directive creates a two-way binding, allowing the drawer to update the state when dismissed via gestures or the Escape key.

Complete Example

Here’s the complete code for a working drawer:

<script>
  import { 
    Drawer, 
    DrawerOverlay, 
    DrawerContent, 
    DrawerHandle 
  } from '@abhivarde/svelte-drawer';

  let open = $state(false);
</script>

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

<Drawer bind:open>
  <DrawerOverlay class="fixed inset-0 bg-black/40" />
  <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
    <DrawerHandle class="mb-8" />
    <h2>Drawer Content</h2>
    <p>This is a drawer component.</p>
    <button onclick={() => open = false}>Close</button>
  </DrawerContent>
</Drawer>

Understanding the Components

Drawer

The main wrapper component that manages state, animations, and gesture handling. Use bind:open to control visibility.

DrawerOverlay

The semi-transparent backdrop that appears behind the drawer. Clicking it dismisses the drawer.

DrawerContent

The container for your drawer content. Includes drag detection and focus management.

DrawerHandle

The visual drag indicator at the top of the drawer. Provides a clear affordance for gesture interactions.

Try Different Directions

The drawer can slide from any edge of the screen:

Bottom (default)

<Drawer bind:open>
  <DrawerOverlay class="fixed inset-0 bg-black/40" />
  <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
    <DrawerHandle class="mb-8" />
    <h2>Bottom Drawer</h2>
  </DrawerContent>
</Drawer>

What’s Next?

Now that you have a basic drawer working, explore more advanced features:

Variants

Use prebuilt variants like sheet, dialog, and sidebar

Snap Points

Create iOS-like drawers with multiple snap positions

Styling & Blur

Customize appearance and add blur effects to overlays

Portal Rendering

Escape z-index conflicts with portal rendering