Drawer

A panel that slides in from the edge of the screen, typically used for navigation or additional content.

Anatomy 

<script>
  import {
    Drawer,
    DrawerTrigger,
    DrawerContent,
    DrawerHeader,
    DrawerTitle,
    DrawerBody,
    DrawerFooter,
    DrawerCloseButton,
    DrawerActionTrigger,
  } from "@saas-ui/svelte/components/drawer";
</script>

<Drawer.Root>
  <Drawer.Trigger>Open Drawer</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
      <Drawer.CloseButton />
    </Drawer.Header>
    <Drawer.Body>
      Drawer content goes here...
    </Drawer.Body>
    <Drawer.Footer>
      <Drawer.ActionTrigger>Cancel</Drawer.ActionTrigger>
      <Button>Save</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Examples

Attached Accessibility

Use the attached prop to render the drawer attached to the edge of the viewport without padding or rounded corners.

Basic Accessibility

Basic drawer with title, body content, and action buttons.

Initial Focus Accessibility

Use the initialFocusEl prop to set which element receives focus when the drawer opens. This is useful for directing user attention to a specific input field.

Offset Accessibility

Pass the offset prop to the Drawer.Content to add spacing around the drawer. You can also use the rounded prop to customize the border radius.

Placement Accessibility

Use the placement prop to change the position of the drawer. Options include start (left), end (right), top, and bottom.

Sizes Accessibility

Use the size prop to change the size of the drawer. Options include xs, sm, md, lg, xl, and full.

Props

Drawer.Root

The root container component for the drawer.

Prop Type Default Description
children Snippet - The drawer content.
open boolean false Whether the drawer is open.
onOpenChange (details: { open: boolean }) => void - Handler called when the open state changes.
size "xs" | "sm" | "md" | "lg" | "xl" | "full" "sm" The size of the drawer.
placement "start" | "end" | "top" | "bottom" "end" The placement of the drawer.
attached boolean false Whether the drawer is attached to the edge of the viewport (no padding/rounded corners).
role "dialog" | "alertdialog" "dialog" The role of the drawer.
initialFocusEl () => HTMLElement | null - Element to receive focus when the drawer is opened.
finalFocusEl () => HTMLElement | null - Element to receive focus when the drawer is closed.
restoreFocus boolean true Whether to restore focus to the element that had focus before the drawer was opened.
lazyMount boolean - Whether to lazily mount the drawer content.
unmountOnExit boolean - Whether to unmount the drawer on exit.
onPrefetch () => void - Callback invoked when hovering over the trigger (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before opening.

Drawer.Content

The content container that renders inside a portal with backdrop.

Prop Type Default Description
children Snippet - The drawer content.
class string - Additional CSS classes to apply.
offset string - The offset from the edge of the viewport (in spacing units). Overrides the attached prop when set.
rounded string - Custom border radius class (e.g., "rounded-md", "rounded-lg"). When used with offset, applies rounding to the drawer.

Drawer.Header

The header section of the drawer.

Prop Type Default Description
children Snippet - The header content.
class string - Additional CSS classes to apply.

Drawer.Title

The title element for the drawer.

Prop Type Default Description
children Snippet - The title content.
class string - Additional CSS classes to apply.

Drawer.Body

The main body content area with scrolling support.

Prop Type Default Description
children Snippet - The body content.
class string - Additional CSS classes to apply.

Drawer.Footer

The footer section for action buttons.

Prop Type Default Description
children Snippet - The footer content.
class string - Additional CSS classes to apply.

Drawer.Trigger

Button that opens the drawer.

Prop Type Default Description
children Snippet - The trigger content.
class string - Additional CSS classes to apply.
asChild boolean false Whether to render as a child element.
variant "solid" | "outline" | "ghost" | "subtle" | "surface" | "plain" "outline" The button variant.
size "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "md" The button size.
colour ColourName "gray" The colour theme of the button.
style string - Additional inline styles.

Drawer.CloseButton

Close button positioned in the top-right corner.

Prop Type Default Description
class string - Additional CSS classes to apply.

Drawer.ActionTrigger

Action button that closes the drawer when clicked.

Prop Type Default Description
children Snippet - The action trigger content.
class string - Additional CSS classes to apply.
asChild boolean false Whether to render as a child element.
variant "solid" | "outline" | "ghost" | "subtle" | "surface" | "plain" "surface" The button variant.
size "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "md" The button size.
colour ColourName "gray" The colour theme of the button.
style string - Additional inline styles.