Overlay

Drawer

A slide-in panel from the screen edge, powered by Vaul. Supports bottom, top, left, and right directions with built-in drag-to-close gesture.

Installation

bash

npx polyui add drawer

Basic Usage

Slides in from the bottom by default. Use DrawerTrigger to open, DrawerContent for body, and DrawerClose to dismiss.

tsx

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@polyui/react/drawer"
import { Button } from "@polyui/react/button"

export function DrawerExample() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Edit Profile</DrawerTitle>
          <DrawerDescription>
            Make changes to your profile here.
          </DrawerDescription>
        </DrawerHeader>
        <div className="px-4 py-2">
          {/* content */}
        </div>
        <DrawerFooter>
          <Button>Save changes</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Direction

Control which edge the drawer slides in from via the direction prop: bottom, top, left, or right.

tsx

<Drawer direction="right">
  <DrawerTrigger asChild>
    <Button>Open Right</Button>
  </DrawerTrigger>
  <DrawerContent>
    {/* content */}
  </DrawerContent>
</Drawer>

Basic

tsx

export function DrawerBasicDemo() {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-xs font-mono text-muted-foreground tracking-widest uppercase">Basic</p>
      <div className="flex flex-wrap gap-3">
        <DrawerBasic />
      </div>
    </div>
  )
}

Directions

tsx

export function DrawerDirections() {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-xs font-mono text-muted-foreground tracking-widest uppercase">Directions</p>
      <div className="flex flex-wrap gap-3">
        <DrawerBasic />
        <DrawerRight />
        <DrawerTop />
        <DrawerLeft />
      </div>
    </div>
  )
}

Props

属性	类型	默认值	说明
`Drawer › direction`	`"bottom" \| "top" \| "left" \| "right"`	`"bottom"`	The direction the drawer slides in from.
`Drawer › open`	`boolean`	`—`	Controlled open state.
`Drawer › onOpenChange`	`(open: boolean) => void`	`—`	Callback when open state changes in controlled mode.
`Drawer › shouldScaleBackground`	`boolean`	`false`	Whether to scale the background content when open (bottom/top only).