Drawer

Installation

bash pnpm dlx shadcn@latest add drawer

bash npx shadcn@latest add drawer

bash yarn dlx shadcn@latest add drawer

Local Registry Installation

To install from a local registry (during development):

# Start local server first
pnpm dev

# Then in another terminal, in your consumer project:
pnpm dlx shadcn@latest add http://localhost:3000/r/drawer.json

This allows testing components locally before publishing to production.

Usage

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

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Type Definitions

interface DrawerProps {
  /** The controlled open state of the drawer */
  open?: boolean;  
DrawerProps.open?: boolean | undefined
The controlled open state of the drawer
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
  /** The direction of the drawer */
  ?: "top" | "bottom" | "left" | "right";
}

Examples

Default

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the drawer.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`direction`	`"top" \	"bottom" \	"left" \

DrawerTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

DrawerContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Drawer

On this page