> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Drawer
> A panel that slides in from the edge of the viewport, built from DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription and DrawerFooter.
```tsx theme={null}
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerTitle,
DrawerTrigger,
} from "@fanvue/ui";
import type {
DrawerCloseProps,
DrawerContentProps,
DrawerDescriptionProps,
DrawerFooterProps,
DrawerHeaderProps,
DrawerOverlayProps,
DrawerPosition,
DrawerProps,
DrawerSize,
DrawerTitleProps,
DrawerTriggerProps,
DrawerVariant,
} from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import {
Button,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@fanvue/ui";
Drawer Title
This is a default drawer that slides in from the right.
Drawer content goes here.
```
## Without Overlay
```tsx theme={null}
import {
Button,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@fanvue/ui";
No OverlayThis drawer has no backdrop overlay behind it.
The page behind remains fully visible.
```
## Left
```tsx theme={null}
import {
Button,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@fanvue/ui";
Left DrawerThis drawer slides in from the left.
{open ? "Open" : "Closed"}
Controlled DrawerThis drawer is controlled via external state.
The open state is managed by the parent component.
);
}
```
## Top
```tsx theme={null}
import {
Button,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@fanvue/ui";
Top DrawerThis drawer slides in from the top.
Notification or banner content.
```
## Props
## Drawer
Root component that manages open/close state for a drawer. Wraps Radix Dialog.Root.
Whether the default `DrawerOverlay` is rendered. When `false`, `modal` is automatically set to `false` as well (unless explicitly overridden) so focus-trap and scroll-lock are disabled.
## DrawerClose
Closes the drawer when clicked. Can be placed anywhere inside the drawer.
A direct re-export of the Radix `DialogPrimitive.Close` primitive. It accepts all of that primitive's props, unchanged.
## DrawerContent
The panel that slides in from the chosen edge. Renders inside a portal with an overlay backdrop by default.
Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.
Whether to render the default `DrawerOverlay` behind the content. Set to `false` to provide your own overlay or omit it entirely.
Prefer setting `overlay` on the `Drawer` root instead so that `modal` is also adjusted automatically.
Props forwarded to the default `DrawerOverlay` when `overlay` is `true`.
The edge from which the drawer slides in.
Named `position` (rather than `side`) to avoid confusion with the CSS `side` concept used by Radix Popover/Tooltip and to better convey the spatial relationship of the drawer to the viewport.
Controls the maximum extent of the drawer panel. For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.
Visual treatment of the panel. Use `"sheet"` (with `position="bottom"`) for a bottom sheet with the modal surface treatment, or `"menu"` for a floating inset menu carrying the dropdown surface.
## DrawerDescription
An accessible description for the drawer, providing supplementary context.
## DrawerFooter
A semantic footer area for the drawer, typically containing action buttons.
Takes no props of its own. Accepts all standard `div` attributes, including `className`.
## DrawerHeader
A semantic header area for the drawer, typically containing a title and description. Renders a built-in close button by default.
Accessible label for the close button.
Whether to show a built-in close (X) button.
## DrawerOverlay
A translucent backdrop rendered behind the drawer content. Clicking the overlay closes the drawer by default.
## DrawerTitle
An accessible title for the drawer. Required for screen readers.
## DrawerTrigger
The element that opens the drawer when clicked.
On touch / pen, a press-and-release that crosses a small movement threshold is treated as a drag and the resulting synthetic click is suppressed — defends against Android Chrome opening the drawer on a scroll-drag-end.
## Exported types
Also exported from `@fanvue/ui`: `DrawerCloseProps`, `DrawerContentProps`, `DrawerDescriptionProps`, `DrawerFooterProps`, `DrawerHeaderProps`, `DrawerOverlayProps`, `DrawerPosition`, `DrawerProps`, `DrawerSize`, `DrawerTitleProps`, `DrawerTriggerProps`, `DrawerVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)