Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Drawer

Draggable panel that slides in from screen edges

## Example​

    "use client"

    import * as React from "react"
    import { Minus, Plus } from "lucide-react"
    import { Bar, BarChart, ResponsiveContainer } from "recharts"

    import {
      Button,
      Drawer,
      DrawerClose,
      DrawerContent,
      DrawerDescription,
      DrawerFooter,
      DrawerHeader,
      DrawerTitle,
      DrawerTrigger,
    } from "@databricks/appkit-ui/react"

    const data = [
      {
        goal: 400,
      },
      {
        goal: 300,
      },
      {
        goal: 200,
      },
      {
        goal: 300,
      },
      {
        goal: 200,
      },
      {
        goal: 278,
      },
      {
        goal: 189,
      },
      {
        goal: 239,
      },
      {
        goal: 300,
      },
      {
        goal: 200,
      },
      {
        goal: 278,
      },
      {
        goal: 189,
      },
      {
        goal: 349,
      },
    ]

    export default function DrawerExample() {
      const [goal, setGoal] = React.useState(350)

      function onClick(adjustment: number) {
        setGoal(Math.max(200, Math.min(400, goal + adjustment)))
      }

      return (
        <Drawer>
          <DrawerTrigger asChild>
            <Button variant="outline">Open Drawer</Button>
          </DrawerTrigger>
          <DrawerContent>
            <div className="mx-auto w-full max-w-sm">
              <DrawerHeader>
                <DrawerTitle>Move Goal</DrawerTitle>
                <DrawerDescription>Set your daily activity goal.</DrawerDescription>
              </DrawerHeader>
              <div className="p-4 pb-0">
                <div className="flex items-center justify-center space-x-2">
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8 shrink-0 rounded-full"
                    onClick={() => onClick(-10)}
                    disabled={goal <= 200}
                  >
                    <Minus />
                    <span className="sr-only">Decrease</span>
                  </Button>
                  <div className="flex-1 text-center">
                    <div className="text-7xl font-bold tracking-tighter">
                      {goal}
                    </div>
                    <div className="text-[0.70rem] uppercase text-muted-foreground">
                      Calories/day
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8 shrink-0 rounded-full"
                    onClick={() => onClick(10)}
                    disabled={goal >= 400}
                  >
                    <Plus />
                    <span className="sr-only">Increase</span>
                  </Button>
                </div>
                <div className="mt-3 h-[120px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={data}>
                      <Bar
                        dataKey="goal"
                        style={{
                          fill: "hsl(var(--foreground))",
                          opacity: 0.9,
                        }}
                      />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
              <DrawerFooter>
                <Button>Submit</Button>
                <DrawerClose asChild>
                  <Button variant="outline">Cancel</Button>
                </DrawerClose>
              </DrawerFooter>
            </div>
          </DrawerContent>
        </Drawer>
      )
    }

## Drawer​

Draggable panel that slides in from screen edges

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`activeSnapPoint` | `string | number | null` |  | - | -
`setActiveSnapPoint` | `((snapPoint: string | number | null) => void)` |  | - | -
`open` | `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.
`noBodyStyles` | `boolean` |  | - | When `true` the `body` doesn't get any styles assigned from Vaul
`onOpenChange` | `((open: boolean) => void)` |  | - | -
`shouldScaleBackground` | `boolean` |  | - | -
`setBackgroundColorOnScale` | `boolean` |  | `true` | When `false` we don't change body's background color when the drawer is open.
`scrollLockTimeout` | `number` |  | `500ms` | Duration for which the drawer is not draggable after scrolling content inside of 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 `&lt;Drawer.Handle /&gt;` component.
`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.
`onDrag` | `((event: PointerEvent<HTMLDivElement>, percentageDragged: number) => void)` |  | - | -
`onRelease` | `((event: PointerEvent<HTMLDivElement>, open: boolean) => void)` |  | - | -
`modal` | `boolean` |  | `true` | When `false` it allows to interact with elements outside of the drawer without closing it.
`nested` | `boolean` |  | - | -
`onClose` | `(() => void)` |  | - | -
`direction` | `enum` |  | `'bottom'` | Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
`defaultOpen` | `boolean` |  | `false` | Opened by default, skips initial enter animation. Still reacts to `open` state changes
`disablePreventScroll` | `boolean` |  | `false` | When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
`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.
`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.
`container` | `HTMLElement | null` |  | - | -
`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.
`preventScrollRestoration` | `boolean` |  | - | -
`autoFocus` | `boolean` |  | - | -
`snapPoints` | `(string | number)[]` |  | - | Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`. You can also use px values, which doesn't take screen height into account.
`fadeFromIndex` | `number` |  | - | Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.

### Usage​

    import { Drawer } from '@databricks/appkit-ui';

    <Drawer /* props */ />

## DrawerClose​

Button that closes the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

    import { DrawerClose } from '@databricks/appkit-ui';

    <DrawerClose /* props */ />

## DrawerContent​

Main content area of the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onEscapeKeyDown` | `((event: KeyboardEvent) => void)` |  | - | Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` |  | - | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
`onFocusOutside` | `((event: FocusOutsideEvent) => void)` |  | - | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`onInteractOutside` | `((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)` |  | - | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`onOpenAutoFocus` | `((event: Event) => void)` |  | - | Event handler called when auto-focusing on open. Can be prevented.
`onCloseAutoFocus` | `((event: Event) => void)` |  | - | Event handler called when auto-focusing on close. Can be prevented.

### Usage​

    import { DrawerContent } from '@databricks/appkit-ui';

    <DrawerContent /* props */ />

## DrawerDescription​

Description text for the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

    import { DrawerDescription } from '@databricks/appkit-ui';

    <DrawerDescription /* props */ />

## DrawerFooter​

Footer section of the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { DrawerFooter } from '@databricks/appkit-ui';

    <DrawerFooter /* props */ />

## DrawerHeader​

Header section of the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { DrawerHeader } from '@databricks/appkit-ui';

    <DrawerHeader /* props */ />

## DrawerOverlay​

Dimmed overlay behind the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

### Usage​

    import { DrawerOverlay } from '@databricks/appkit-ui';

    <DrawerOverlay /* props */ />

## DrawerPortal​

Portal container for drawer content

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`container` | `Element | DocumentFragment | null` |  | - | Specify a container element to portal the content into.
`forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

### Usage​

    import { DrawerPortal } from '@databricks/appkit-ui';

    <DrawerPortal /* props */ />

## DrawerTitle​

Title text for the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

    import { DrawerTitle } from '@databricks/appkit-ui';

    <DrawerTitle /* props */ />

## DrawerTrigger​

Button that opens the drawer

Source: `packages/appkit-ui/src/react/ui/drawer.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

    import { DrawerTrigger } from '@databricks/appkit-ui';

    <DrawerTrigger /* props */ />