Drawer

Reveal focused controls or details without leaving the page.

Review the checklist without leaving the page.Tapto continue.

Credits

Drawer is built on top of Vaul by emilkowalski.

Installation

npx shadcn@latest add @iconiq/drawer

Props

Drawer

7 props

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

Defaulttrue

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

dismissibleboolean

Defaulttrue

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.

Notes

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.

Compound parts

5 props

The registry entry exports the familiar shadcn-style DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerClose, DrawerHeader, DrawerFooter, DrawerTitle, and DrawerDescription parts.

DrawerTriggerVaul Trigger props

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

DrawerContentVaul Content props

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

DrawerCloseVaul Close props

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

DrawerHeader / DrawerFooterdiv props

Layout helpers for the title area and bottom action area. Both merge className with the default spacing.

DrawerTitle / DrawerDescriptionVaul Title and Description props

Accessible heading and helper text parts forwarded to Vaul's dialog title and description primitives.

Notes

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

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

Motion and layout

2 props

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.

Notes

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.

The motion classes include reduced-motion fallbacks that remove the added Tailwind animation layer while leaving Vaul's accessibility semantics intact.

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.