---
url: "https://vueda.dev/v3/reference/theming/keys/DrawerContent.md"
title: "DrawerContent"
---

# DrawerContent

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded.

Vue component: [DrawerContent](/v3/reference/api/vue/DrawerContent.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DrawerContent.md#theme-key-DrawerContent-root) | 5 classes | The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded. |
| [handle](/v3/reference/theming/keys/DrawerContent.md#theme-key-DrawerContent-handle) | 2 classes | The drag handle shown for bottom drawers. It stays hidden for other drawer directions where the edge affordance would be misleading. |

<a id="theme-key-DrawerContent-root"></a>

## root

> The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded.

Default classes:

```text
group/drawer-content bg-background text-foreground fixed z-50 flex h-auto flex-col
data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-vueda-modal
data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-vueda-modal
data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm
data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm
```

Source: `client/lib/theme/vueda-tailwind/shell/DrawerContent.theme.js:18`

<a id="theme-key-DrawerContent-handle"></a>

## handle

> The drag handle shown for bottom drawers. It stays hidden for other drawer directions where the edge affordance would be misleading.

Default classes:

```text
bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full
group-data-[vaul-drawer-direction=bottom]/drawer-content:block
```

Source: `client/lib/theme/vueda-tailwind/shell/DrawerContent.theme.js:39`