Drawer

The Drawer component provides a panel that slides in from the edge of the screen, typically used for mobile navigation or displaying additional content without leaving the current page.

Usage

<script>
  import { 
    Drawer,
    DrawerTrigger,
    DrawerContent,
    DrawerHeader,
    DrawerTitle,
    DrawerDescription,
    DrawerFooter,
    DrawerClose
  } from "$lib/components/ui/drawer";
  import { Button } from "$lib/components/ui/button";
</script>

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer Description</DrawerDescription>
    </DrawerHeader>
    <div class="p-4">Drawer Content</div>
    <DrawerFooter>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
      <Button>Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

API Reference

Drawer

The main container component for the drawer.

Property	Type	Default	Description
open	boolean	false	Whether the drawer is open. Can be bound with bind:open.
shouldScaleBackground	boolean	true	Whether the background should scale when the drawer is open.
snapPoints	number[]	-	Array of snap points (0-1) for the drawer to snap to when dragging.
activeSnapPoint	number \| null	null	The currently active snap point. Can be bound with bind:activeSnapPoint.

DrawerTrigger

The button that triggers the drawer to open.

Property	Type	Default	Description
asChild	boolean	false	Whether to render the trigger as a child component.

DrawerContent

The content container for the drawer.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the content.

DrawerHeader

A container for the drawer header content.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the header.

DrawerFooter

A container for the drawer footer content.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the footer.

DrawerTitle

The title of the drawer.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the title.

DrawerDescription

A description for the drawer.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the description.

DrawerClose

A button that closes the drawer when clicked.

Property	Type	Default	Description
asChild	boolean	false	Whether to render the close button as a child component.

Implementation

The Drawer component is built on top of vaul-svelte, a port of the Vaul drawer component for Svelte.

// Implementation details from drawer-content.svelte
<DrawerPrimitive.Portal {...portalProps}>
  <DrawerOverlay />
  <DrawerPrimitive.Content
    bind:ref
    class={cn(
      "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
      className
    )}
    {...restProps}
  >
    <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
    {@render children?.()}
  </DrawerPrimitive.Content>
</DrawerPrimitive.Portal>