---
category: overlays
---

# Drawer

Source: `components/ui/drawer.tsx`.

`Drawer` is a compound component. Its parts are exported **flat** (`DrawerPortal`, not
`Drawer.Portal`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `DrawerPortal` | `React.ComponentProps<typeof DrawerPrimitive.Portal>` |
| `DrawerOverlay` | `React.ComponentProps<typeof DrawerPrimitive.Overlay>` |
| `DrawerTrigger` | `React.ComponentProps<typeof DrawerPrimitive.Trigger>` |
| `DrawerClose` | `React.ComponentProps<typeof DrawerPrimitive.Close>` |
| `DrawerContent` | `React.ComponentProps<typeof DrawerPrimitive.Content>` |
| `DrawerHeader` | `React.ComponentProps<'div'>` |
| `DrawerFooter` | `React.ComponentProps<'div'>` |
| `DrawerTitle` | `React.ComponentProps<typeof DrawerPrimitive.Title>` |
| `DrawerDescription` | `React.ComponentProps<typeof DrawerPrimitive.Description>` |

All parts accept `className` and are composed as children of `Drawer`.