Drawer

A bottom drawer with native-feeling drag-to-dismiss interaction. Built on vaul with snap points, multiple sizes, and composable slot components.

Overview

The Drawer component is a bottom sheet overlay with drag-to-dismiss interaction. It slides up from the bottom of the viewport and can be dismissed by dragging down, pressing Escape, or clicking the overlay. Built on vaul for native-feeling touch interactions.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add drawer

pnpm dlx @work-rjkashyap/unified-ui add drawer

npx @work-rjkashyap/unified-ui add drawer

bunx @work-rjkashyap/unified-ui add drawer

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Drawer,
	DrawerTrigger,
	DrawerContent,
	DrawerHandle,
	DrawerHeader,
	DrawerBody,
	DrawerFooter,
	DrawerTitle,
	DrawerDescription,
	DrawerClose,
	DrawerContent /* ... */,
} from "@work-rjkashyap/unified-ui";

Examples

Default

<Drawer>
<DrawerTrigger asChild>
  <Button variant="secondary">Open Drawer</Button>
</DrawerTrigger>
<DrawerContent>
  <DrawerHeader>
    <DrawerTitle>Edit Profile</DrawerTitle>
    <DrawerDescription>Make changes to your profile here.</DrawerDescription>
  </DrawerHeader>
  <DrawerBody>
    <Input placeholder="Name" />
  </DrawerBody>
  <DrawerFooter>
    <Button>Save changes</Button>
    <DrawerClose asChild>
      <Button variant="secondary">Cancel</Button>
    </DrawerClose>
  </DrawerFooter>
</DrawerContent>
</Drawer>

<Drawer><DrawerTrigger asChild>  <Button variant="secondary">Open Drawer</Button></DrawerTrigger><DrawerContent>  <DrawerHeader>    <DrawerTitle>Edit Profile</DrawerTitle>    <DrawerDescription>Make changes to your profile here.</DrawerDescription>  </DrawerHeader>  <DrawerBody>    <Input placeholder="Name" />  </DrawerBody>  <DrawerFooter>    <Button>Save changes</Button>    <DrawerClose asChild>      <Button variant="secondary">Cancel</Button>    </DrawerClose>  </DrawerFooter></DrawerContent></Drawer>

Sizes

<Drawer>
<DrawerTrigger asChild>
  <Button>Small</Button>
</DrawerTrigger>
<DrawerContent size="sm">…</DrawerContent>
</Drawer>

<Drawer>
<DrawerTrigger asChild>
  <Button>Medium</Button>
</DrawerTrigger>
<DrawerContent size="md">…</DrawerContent>
</Drawer>

<Drawer>
<DrawerTrigger asChild>
  <Button>Large</Button>
</DrawerTrigger>
<DrawerContent size="lg">…</DrawerContent>
</Drawer>

<Drawer>
<DrawerTrigger asChild>
  <Button>Full</Button>
</DrawerTrigger>
<DrawerContent size="full">…</DrawerContent>
</Drawer>

<Drawer><DrawerTrigger asChild>  <Button>Small</Button></DrawerTrigger><DrawerContent size="sm">…</DrawerContent></Drawer><Drawer><DrawerTrigger asChild>  <Button>Medium</Button></DrawerTrigger><DrawerContent size="md">…</DrawerContent></Drawer><Drawer><DrawerTrigger asChild>  <Button>Large</Button></DrawerTrigger><DrawerContent size="lg">…</DrawerContent></Drawer><Drawer><DrawerTrigger asChild>  <Button>Full</Button></DrawerTrigger><DrawerContent size="full">…</DrawerContent></Drawer>

Without Handle

<Drawer>
<DrawerTrigger asChild>
  <Button>No Handle</Button>
</DrawerTrigger>
<DrawerContent showHandle={false}>
  <DrawerHeader>
    <DrawerTitle>No Handle</DrawerTitle>
  </DrawerHeader>
  <DrawerBody>Content</DrawerBody>
  <DrawerFooter>
    <DrawerClose asChild>
      <Button variant="secondary">Close</Button>
    </DrawerClose>
  </DrawerFooter>
</DrawerContent>
</Drawer>

<Drawer><DrawerTrigger asChild>  <Button>No Handle</Button></DrawerTrigger><DrawerContent showHandle={false}>  <DrawerHeader>    <DrawerTitle>No Handle</DrawerTitle>  </DrawerHeader>  <DrawerBody>Content</DrawerBody>  <DrawerFooter>    <DrawerClose asChild>      <Button variant="secondary">Close</Button>    </DrawerClose>  </DrawerFooter></DrawerContent></Drawer>

Props

Drawer (Root)

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`defaultOpen`	`boolean`	`false`	Whether the drawer starts open.
`shouldScaleBackground`	`boolean`	`true`	Scale background content when open. Requires `[vaul-drawer-wrapper]` on your app wrapper.
`dismissible`	`boolean`	`true`	Whether the drawer can be dismissed by dragging or clicking outside.
`direction`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Direction the drawer opens from.
`nested`	`boolean`	`false`	Whether this drawer is nested inside another drawer.
`modal`	`boolean`	`true`	Whether to block body scroll when open.
`onClose`	`() => void`	—	Called when drawer is closed.

DrawerContent

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Controls the maximum height of the drawer.
`showHandle`	`boolean`	`true`	Whether to show the drag handle indicator at the top.
`overlayClassName`	`string`	—	Extra classes for the backdrop overlay.
`className`	`string`	—	Extra classes for the drawer content panel.

DrawerTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element instead of rendering a `<button>`.
`className`	`string`	—	Extra classes.

DrawerClose

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element.
`className`	`string`	—	Extra classes.

DrawerHeader / DrawerBody / DrawerFooter

Prop	Type	Default	Description
`className`	`string`	—	Extra classes.
`children`	`ReactNode`	—	Content.

DrawerTitle / DrawerDescription

Prop	Type	Default	Description
`className`	`string`	—	Extra classes.
`children`	`ReactNode`	—	Text content.

Sizes Reference

Size	Max Height	Use Case
`sm`	`30vh`	Quick confirmations, brief messages
`md`	`50vh`	Forms, moderate content (default)
`lg`	`75vh`	Long forms, lists, rich content
`full`	`calc(100vh - 2rem)`	Complex workflows, mobile-first views

Accessibility

Focus trap: Focus is trapped inside the drawer when open.
Escape to close: Pressing Escape closes the drawer.
Scroll lock: Body scroll is locked while the drawer is open.
ARIA: Uses role="dialog" with aria-labelledby (DrawerTitle) and aria-describedby (DrawerDescription) automatically via vaul.
Drag dismiss: The drawer can be swiped down to dismiss, providing a native-feeling interaction on touch devices.

Design Tokens

Token	CSS Variable	Tailwind	Usage
Background	`--background`	`bg-background`	Drawer panel background
Border	`--border`	`border-border`	Panel border
Overlay	—	`bg-black/50`	Backdrop overlay
Z-index (content)	`--z-modal`	`z-[var(--z-modal)]`	Drawer panel
Z-index (overlay)	`--z-overlay`	`z-[var(--z-overlay)]`	Backdrop
Radius	—	`rounded-t-lg`	Top corners only
Shadow	`--shadow-xl`	`shadow-xl`	Elevation

On this page