ComponentClient component

Drawer

A gesture-driven bottom sheet for focused mobile tasks and confirmations.

Installation

Preview

Usage

tsx

import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Publish component?</DrawerTitle>
      <DrawerDescription>This action updates the public registry.</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

API reference

Prop	Type	Default	Description
`direction`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Edge from which the drawer enters.
`dismissible`	`boolean`	`true`	Allows gesture and overlay dismissal.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.