Drawer

import { Button } from "@/components/ui/button"
import {
  Drawer,

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/drawer.json

Usage

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

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

API Reference

Component	Description
`Drawer`	The root component
`DrawerTrigger`	The button that opens it
`DrawerContent`	The drawer content container
`DrawerHeader`	Header section
`DrawerTitle`	The drawer title
`DrawerDescription`	Description text
`DrawerFooter`	Footer section for actions
`DrawerClose`	Close button component

Drawer Props

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open changes
`shouldScaleBackground`	`boolean`	`true`	Scale the background on open

Drawer

Installation

Usage

API Reference

Drawer

Drawer Props

On this page