- Home
- Components
- Drawer

# Drawer

A drawer component for React.

## Props

### Drawer


Prop	Type	Default	Description
...Vaul props	ComponentProps<typeof DrawerPrimitive.Root>	-	All Vaul drawer root props

### Drawer Root


Prop	Type	Default	Description
direction	'top' | 'right' | 'bottom' | 'left'	'bottom'	Which edge to slide from
...Vaul props	ComponentProps<typeof DrawerPrimitive.Root>	-	All Vaul root props

### DrawerContent


Prop	Type	Default	Description
...Vaul props	ComponentProps<typeof DrawerPrimitive.Content>	-	All Vaul content props

Other parts (DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose) are styled wrappers around Vaul components.

## Usage

```
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open</Button>
  </DrawerTrigger>
  <DrawerContent onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </DrawerDescription>
    </DrawerHeader>
    <div className="grid flex-1 auto-rows-min gap-4">
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-name">Name</label>
        <InputRoot id="sheet-demo-name" defaultValue="Pedro Duarte" />
      </div>
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-username">Username</label>
        <InputRoot id="sheet-demo-username" defaultValue="@peduarte" />
      </div>
    </div>
    <DrawerFooter>
      <Button variant="primary">Save</Button>
      <SheetClose asChild>
        <Button variant="secondary">Close</Button>
      </SheetClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

### Example

```
<Drawer>
  <DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>
```