🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Drawer

A draggable panel that slides in from the edge of the screen, typically from the bottom on mobile.

Drawers are mobile-friendly overlays that allow users to access additional content or actions without navigating away from the current screen. Unlike dialogs that appear in the center, drawers slide in from a screen edge and can be dismissed by dragging them back. They're particularly effective on mobile devices for displaying forms, filters, settings, or detailed information while maintaining context of the underlying content.

Built on top of Vaul library with smooth drag-to-dismiss animations, snap points, velocity-based dismissal, and accessibility support including focus trapping and proper ARIA attributes.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@strongtie/design-system/drawer"

export function DrawerDefault() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <div className="p-4">
          <p className="text-muted-foreground text-sm">
            This will permanently delete your account and remove your data from
            our servers.
          </p>
        </div>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Installation


npm install @strongtie/design-system

import { Drawer } from "@strongtie/design-system/drawer"

Components

This module exports the following components:

Drawer
Portal
DrawerOverlay
DrawerTrigger
DrawerClose
DrawerContent
DrawerHeader
DrawerFooter
DrawerTitle
DrawerDescription

Props

`<Drawer>`

Prop	Type	Default	Description
`activeSnapPoint`	`string \| number \| null`	-
`autoFocus`	`boolean`	-
`closeThreshold`	`number`	`0.25`	Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
`container`	`HTMLElement \| null`	-
`defaultOpen`	`boolean`	`false`	Opened by default, skips initial enter animation. Still reacts to `open` state changes
`direction`	`top` \| `bottom` \| `left` \| `right`	`'bottom'`	Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
`disablePreventScroll`	`boolean`	`false`	When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
`dismissible`	`boolean`	`true`	When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
`fixed`	`boolean`	-	When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
`handleOnly`	`boolean`	`false`	When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
`modal`	`boolean`	`true`	When `false` it allows to interact with elements outside of the drawer without closing it.
`nested`	`boolean`	-
`noBodyStyles`	`boolean`	-	When `true` the `body` doesn't get any styles assigned from Vaul
`onAnimationEnd`	`((open: boolean) => void)`	-	Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered. Useful to revert any state changes for example.
`onClose`	`(() => void)`	-
`onDrag`	`((event: PointerEvent<HTMLDivElement>, percentageDragged: number) => void)`	-
`onOpenChange`	`((open: boolean) => void)`	-
`onRelease`	`((event: PointerEvent<HTMLDivElement>, open: boolean) => void)`	-
`open`	`boolean`	-
`preventScrollRestoration`	`boolean`	-
`repositionInputs`	`boolean`	`true when {@link snapPoints } is defined`	When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
`scrollLockTimeout`	`number`	`500ms`	Duration for which the drawer is not draggable after scrolling content inside of the drawer.
`setActiveSnapPoint`	`((snapPoint: string \| number \| null) => void)`	-
`setBackgroundColorOnScale`	`boolean`	`true`	When `false` we don't change body's background color when the drawer is open.
`shouldScaleBackground`	`boolean`	`true`
`snapToSequentialPoint`	`boolean`	`false`	Disabled velocity based swiping for snap points. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@strongtie/design-system/drawer"

export function DrawerDefault() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <div className="p-4">
          <p className="text-muted-foreground text-sm">
            This will permanently delete your account and remove your data from
            our servers.
          </p>
        </div>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

drawer-content
drawer-content-handle
drawer-description
drawer-footer
drawer-header
drawer-overlay
drawer-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Dialog Dropdown Menu

On This Page

Example Installation Components Props <Drawer>Example Styling Additional Classes Accessibility

Contribute

Drawer

A draggable panel that slides in from the edge of the screen, typically from the bottom on mobile.

Built on top of Vaul library with smooth drag-to-dismiss animations, snap points, velocity-based dismissal, and accessibility support including focus trapping and proper ARIA attributes.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@strongtie/design-system/drawer"

export function DrawerDefault() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <div className="p-4">
          <p className="text-muted-foreground text-sm">
            This will permanently delete your account and remove your data from
            our servers.
          </p>
        </div>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Installation


npm install @strongtie/design-system

import { Drawer } from "@strongtie/design-system/drawer"

Components

This module exports the following components:

Drawer
Portal
DrawerOverlay
DrawerTrigger
DrawerClose
DrawerContent
DrawerHeader
DrawerFooter
DrawerTitle
DrawerDescription

Props

`<Drawer>`

Prop	Type	Default	Description
`activeSnapPoint`	`string \| number \| null`	-
`autoFocus`	`boolean`	-
`closeThreshold`	`number`	`0.25`	Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
`container`	`HTMLElement \| null`	-
`defaultOpen`	`boolean`	`false`	Opened by default, skips initial enter animation. Still reacts to `open` state changes
`direction`	`top` \| `bottom` \| `left` \| `right`	`'bottom'`	Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
`disablePreventScroll`	`boolean`	`false`	When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
`dismissible`	`boolean`	`true`	When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
`fixed`	`boolean`	-	When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
`handleOnly`	`boolean`	`false`	When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
`modal`	`boolean`	`true`	When `false` it allows to interact with elements outside of the drawer without closing it.
`nested`	`boolean`	-
`noBodyStyles`	`boolean`	-	When `true` the `body` doesn't get any styles assigned from Vaul
`onAnimationEnd`	`((open: boolean) => void)`	-	Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered. Useful to revert any state changes for example.
`onClose`	`(() => void)`	-
`onDrag`	`((event: PointerEvent<HTMLDivElement>, percentageDragged: number) => void)`	-
`onOpenChange`	`((open: boolean) => void)`	-
`onRelease`	`((event: PointerEvent<HTMLDivElement>, open: boolean) => void)`	-
`open`	`boolean`	-
`preventScrollRestoration`	`boolean`	-
`repositionInputs`	`boolean`	`true when {@link snapPoints } is defined`	When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
`scrollLockTimeout`	`number`	`500ms`	Duration for which the drawer is not draggable after scrolling content inside of the drawer.
`setActiveSnapPoint`	`((snapPoint: string \| number \| null) => void)`	-
`setBackgroundColorOnScale`	`boolean`	`true`	When `false` we don't change body's background color when the drawer is open.
`shouldScaleBackground`	`boolean`	`true`
`snapToSequentialPoint`	`boolean`	`false`	Disabled velocity based swiping for snap points. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@strongtie/design-system/drawer"

export function DrawerDefault() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <div className="p-4">
          <p className="text-muted-foreground text-sm">
            This will permanently delete your account and remove your data from
            our servers.
          </p>
        </div>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

drawer-content
drawer-content-handle
drawer-description
drawer-footer
drawer-header
drawer-overlay
drawer-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Dialog Dropdown Menu

On This Page

Example Installation Components Props <Drawer>Example Styling Additional Classes Accessibility

Contribute