Drawer

PreviousNext

A drawer component that slides out from the side of the screen.

Component drawer-demo not found in registry.

Installation

pnpm dlx shadcn-ui@latest add drawer

Usage

import * as Button from "@/components/ui/button"
import * as Drawer from "@/components/ui/drawer"
 
export default function DrawerDemo() {
  return (
    <Drawer.Trigger>
      <Button.Root variant="primary" appearance="filled">
        Open Drawer
      </Button.Root>
      <Drawer.Overlay side="right">
        <Drawer.Content side="right">
          <Drawer.Header title="Settings" description="Manage your settings." />
          <Drawer.Body>
            <p>Your drawer content goes here.</p>
          </Drawer.Body>
          <Drawer.Footer>
            <Button.Root variant="primary" appearance="filled" slot="close">
              Save
            </Button.Root>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Overlay>
    </Drawer.Trigger>
  )
}

Examples

Left Side Drawer

Component drawer-left not found in registry.

Without Header

Component drawer-without-header not found in registry.