Drawer

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>
  )
}

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`	-
`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>
  )
}

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>
  )
}

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`	-
`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>
  )
}

Drawer

Example

Installation

Components

Props

`<Drawer>`

Example

Styling

Classes

Accessibility

Drawer

Example

Installation

Components

Props

`<Drawer>`

Example

Styling

Classes

Accessibility