---
title: "Drawer Provider"
description: "A wrapper that coordinates drawers and optionally scales the page behind them."
canonical_url: "https://vinicunca.dev/pohon/components/drawer-provider"
---
# Drawer Provider

> A wrapper that coordinates drawers and optionally scales the page behind them.

## Usage `Soon`

Wrap page content in DrawerProvider and enable `scale` to shrink it while a descendant [Drawer](https://vinicunca.dev/pohon/components/drawer) is open. This replaces `data-vaul-drawer-wrapper`.

```vue
<PDrawerProvider scale class="min-h-dvh" :ui="{ content: 'min-h-dvh' }">
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</PDrawerProvider>
```

Keep the Drawer's portal enabled so its panel renders outside the scaled page. Every descendant Drawer participates. `scale` defaults to `false`.

### Scale

The page scales down and gains rounded corners when a Drawer opens. It follows swipe progress back toward its resting state during dismissal. Reduced-motion preferences disable the transition.

### Element

Use `as` to change the root element. Defaults to `div`.

## Examples

### Custom background

Use `ui.background` to customize the surface behind the page, and `ui.content` for the page wrapper.

```vue
<PDrawerProvider scale :ui="{ background: 'bg-background-accented', content: 'min-h-dvh p-4' }">
  <PDrawer title="Example" close>
    <PButton label="Open" />
    <template #body>Page content scales behind this drawer.</template>
  </PDrawer>
</PDrawerProvider>
```

## API

### Props

```ts
/**
 * Props for the DrawerProvider component
 */
interface DrawerProviderProps {
  /**
   * The element or component this component should render as.
   * @default 'div'
   */
  as?: any;
  /**
   * Scale the page content while a descendant drawer is open.
   * @default false
   */
  scale?: boolean | undefined;
  ui?: { root?: SlotClass; background?: SlotClass; content?: SlotClass; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the DrawerProvider component
 */
interface DrawerProviderSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    drawerProvider: {
      slots: {
        root: 'relative isolate',
        background: 'absolute inset-0 bg-background-inverted',
        content: 'relative'
      },
      variants: {
        scale: {
          true: {
            content: [
              'pohon-drawer-indent bg-background overflow-hidden',
              'pohon-drawer-indent-transition'
            ]
          }
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/DrawerProvider.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/drawer-provider.ts).

---

- [Akar Drawer](https://vinicunca.dev/akar/components/drawer)
- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/DrawerProvider.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.