# Drawer

Draggable panel that slides in from screen edges

## Example

## Drawer

Draggable panel that slides in from screen edges

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/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 `<Drawer.Handle />` 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

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

```

## DrawerClose

Button that closes the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

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

### Usage

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

```

## DrawerContent

Main content area of the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/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

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

```

## DrawerDescription

Description text for the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

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

### Usage

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

```

## DrawerFooter

Footer section of the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

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

```

## DrawerHeader

Header section of the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

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

```

## DrawerOverlay

Dimmed overlay behind the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/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

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

```

## DrawerPortal

Portal container for drawer content

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/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

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

```

## DrawerTitle

Title text for the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

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

### Usage

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

```

## DrawerTrigger

Button that opens the drawer

**Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx)

### Props

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

### Usage

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

```