Drawer

Display a content that slides in from the side of the screen.

Usage

Use standalone.

<Drawer {...props}>Content</Drawer>

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

<dialog class="whole" {...rest} {style}>
  {children}
</dialog>

Props

* required. Other HTMLDialogAttributes are passed to <dialog> via rest props; class is merged onto the root.

If size is omitted, auto is used. It's recommended to specify the size explicitly, since the CSS property interpolate-size: allow-keywords;, which is not yet supported by some browsers, is applied when using auto.

Drawer is a native modal <dialog> opened with showModal(): focus is trapped and background content is inert while open, and page scroll is locked with :root:has(dialog[open]).

Styling

In this component, margin and padding cannot be used for the whole part. To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-drawer

Behavior

Drawer is modal: focus is trapped and background siblings are inert while open by native dialog behavior. closable=false creates a forced-action modal (no light-dismiss/Escape). Open/close animation timing is published as --svs-duration for caller CSS; cssvar.duration renames it (caller then owns reduced-motion for that token).

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

• Dialog (whole <dialog>): aria-label from the ariaLabel prop.

Provide an accessible name yourself because there is no built-in visible label. Pass ariaLabel, or pass aria-labelledby through the rest props. The managed aria-label attribute is omitted from DrawerProps and cannot be passed as aria-label.

Standards Basis

Drawer is built on a native <dialog> opened with showModal(), so keyboard and assistive-technology support follows the browser standard for modal dialogs. See the Concepts standards-first guidance for the library's approach. When closable is false, the component prevents the native Escape light-dismiss.

Exports

Types

type Position = "top" | "right" | "bottom" | "left";
type DrawerCssVar = "duration";
interface DrawerProps extends Omit<HTMLDialogAttributes, "children" | "style" | "aria-label"> {
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  position?: Position; // ("left")
  size?: string; // ("auto")
  duration?: number; // (200)
  cssvar?: Partial<Record<DrawerCssVar, string>>;
  closable?: boolean; // (true)
  ariaLabel?: string;
  element?: HTMLDialogElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other HTMLDialogAttributes are passed to <dialog> via ...rest; `class` is merged onto root
  // style is component-owned (omitted)
}
type DrawerReqdProps = "children";
type DrawerBindProps = "open" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

<script lang="ts">
  import { Drawer } from "svseeds";

  let open = $state(false);
  const styling = {
    whole: "flex flex-col justify-center bg-white text-black dark:bg-black dark:text-white",
  };
  const myProps = {
    position: "right" as const,
    size: "10rem",
    styling,
  };
</script>

<button class="px-2 rounded-md border text-center cursor-pointer" onclick={() => (open = true)}>Open Drawer</button>
<Drawer bind:open {...myProps}>
  <div class="text-center">Hello!!</div>
</Drawer>

With Interactive Variant

<script lang="ts">
  import { Drawer } from "svseeds";
  import X from "@lucide/svelte/icons/x";

  let { variant = $bindable() } = $props();
  let open = $state(false);
  const variantStyle = {
    neutral: "bg-gray-400",
    active: "bg-teal-500",
    inactive: "bg-red-500",
    blue: "bg-blue-500",
    yellow: "bg-yellow-500",
    sky: "bg-sky-500",
  };
  const styling = {
    whole: {
      base: "text-black dark:text-white",
      ...variantStyle,
    },
  };
  const myProps = {
    position: "bottom" as const,
    size: "calc(var(--spacing) * 30)",
    duration: 500,
    styling,
  };
</script>

<button class="px-2 rounded-md border text-center cursor-pointer" onclick={() => (open = true)}>Open Drawer</button>
<Drawer bind:open {variant} {...myProps}>
  <div class="py-2 px-4">
    <div class="flex justify-between items-center">
      <div class="text-xl">Drawer Title</div>
      <button class="cursor-pointer" onclick={() => (open = false)}>
        <X class="size-5" />
      </button>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</Drawer>