Drawer

A slide-in panel anchored to any edge of the viewport, built on Radix UI Dialog for full accessibility.

Live Demo

Props

Prop	Type	Default	Description
`side`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Side of the viewport the drawer slides in from.
`open`	`boolean`	`—`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`—`	Callback when open state changes.

Usage

import {
  Drawer, DrawerContent, DrawerHeader,
  DrawerTitle, DrawerDescription,
  DrawerFooter, DrawerClose
} from '@ghiberti85/ui'

const [open, setOpen] = useState(false)

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <div>Body content</div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="secondary">Close</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

View in Storybook

Open in Storybook →

←Stepper DataTable→