Svelte Tailwind Drawer

A simple svelte Drawer component build with vanilla Tailwind CSS.

Check out the demo

Features

• Fully responsive
• Transitions
• Placement left or right
• Customizable max-screen-size
• Lock body scrolling when open
• and most importanly: very simple!

Usage

No package bullshit - just copy paste the ~50 lines from src/lib/ui/Drawer.svelte code into your svelte project and you are good to go

Call it via

<script>
  import Drawer from "$lib/ui/Drawer.svelte";

  let isOpen = false;
  const handleToggle = () => {
    isOpen = !isOpen;
  };
</script>

<Drawer {isOpen} on:clickAway={handleToggle}>
  <button class="m-12 text-bold text-xl" on:click={handleToggle}>Close</button>
  <!-- your stuff -->
</Drawer>

Open and Close state must be handled via the User. For easy usage propgate the state through your components via dispatcher. If the project gets more complicated I recommand handling the state via svelte stores.

Build with

svelte: 3.44.0
tailwindcss: 3.0.24

Parameters