Drawer

Reveal focused controls or details without leaving the page.

Credits

Drawer is built on top of Vaul by emilkowalski.

Installation

npx shadcn@latest add @iconiq/drawer

Props

Drawer

Vaul-backed drawer root that coordinates open state, drag gestures, overlay dismissal, focus management, and side-based placement for the compound parts.

openboolean

Optional controlled open state. Pair it with onOpenChange when parent state should own the drawer lifecycle.

defaultOpenboolean

Initial open state for uncontrolled usage. Vaul skips the first enter animation when the drawer is mounted open.

onOpenChange(open: boolean) => void

Called whenever the drawer opens or closes from the trigger, overlay, Escape key, close part, or drag release.

direction"left" | "right" | "top" | "bottom"

Default "bottom"

Chooses the drawer edge and matching Vaul slide direction. The content classes style each direction with the appropriate inset and rounded leading edge.

modalboolean

Default true

Keeps focus and outside interaction modal while the drawer is open. Set false for non-modal command surfaces.

dismissibleboolean

Default true

Allows overlay click, Escape, and drag gestures to close the drawer. Controlled drawers can disable this when a flow must be completed explicitly.

snapPoints(number | string)[]

Optional Vaul snap points for stepped drawer heights or widths. Values may be percentages or px strings.

The root accepts the full Vaul Root prop surface, including drag callbacks, activeSnapPoint, closeThreshold, shouldScaleBackground, and container.

Direction defaults to bottom at the Vaul layer, while the docs preview switches between bottom on small screens and right on larger screens.

DrawerTrigger

Opens the drawer from a button, link, or custom interactive target.

asChildboolean

Use when a local button or link should remain the visible trigger element.

childrenReactNode

Required

Interactive content rendered by the trigger primitive.

DrawerPortal

Portal wrapper for drawer overlay and panel content. DrawerContent composes it automatically in the common path.

childrenReactNode

Required

Overlay and panel content rendered outside the page flow.

DrawerPortal is kept as an exported part for API symmetry, while DrawerContent composes it automatically for the common overlay-plus-panel path.

DrawerOverlay

Full-screen overlay rendered behind the drawer panel.

classNamestring

Merged with the default overlay tint and blur classes.

DrawerContent

Portals the overlay and animated panel, applies direction-aware layout classes, and renders the optional bottom drag handle.

childrenReactNode

Required

Drawer body content rendered inside the animated panel.

classNamestring

Merged with the direction-aware panel geometry and surface classes.

DrawerContent marks rendered children as non-draggable so selecting text inside the panel does not trigger Vaul's drag-to-close gesture.

DrawerClose

Closes the drawer from a button or custom interactive target.

asChildboolean

Use asChild to turn an existing footer action into the close control.

childrenReactNode

Required

Interactive content rendered by the close primitive.

DrawerHeader

Layout helper for the title area at the top of the drawer panel.

childrenReactNode

Required

Header content such as DrawerTitle and DrawerDescription.

classNamestring

Merged with the default header spacing classes.

DrawerFooter

Layout helper for actions or supporting context at the bottom of the drawer.

childrenReactNode

Required

Footer actions or supporting context.

classNamestring

Merged with the default footer spacing classes.

DrawerTitle

Accessible heading part forwarded to Vaul's dialog title primitive.

childrenReactNode

Required

Drawer heading content.

classNamestring

Merged with the default title typography classes.

DrawerDescription

Accessible helper text part forwarded to Vaul's dialog description primitive.

childrenReactNode

Required

Supporting description copy beneath the drawer title.

classNamestring

Merged with the default description typography classes.

DrawerTitle and DrawerDescription should be included inside DrawerHeader when the panel needs accessible labeling.

Motion and layout

The component leans on Vaul's drag-aware transform animation, then adds softer overlay timing, tuned animation duration, and direction-specific panel geometry.

overlaybuilt-in

A fixed full-screen overlay fades in behind the drawer and uses a subtle black tint with backdrop blur support.

contentbuilt-in

The panel gets a fluid cubic-bezier open curve, a shorter close duration, GPU-friendly transform hints, and a slightly extended initial transform for a softer arrival.

Bottom drawers show the handle by default; top, left, and right drawers keep the content surface clean unless you add your own handle.

DrawerContent marks rendered children as non-draggable so selecting text inside the panel does not trigger Vaul's drag-to-close gesture.

Top and bottom drawers cap at 80vh, while left and right drawers use a three-quarter width with a small-screen max width at the sm breakpoint.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: vaul.

This page documents the Vaul install only. The Base UI and Radix UI provider options are visible for section consistency but disabled because this drawer is not a primitive-specific wrapper.

The generated registry file is /r/drawer.json.