dotUI

Drawer

A drawer slides in from the edge of the screen to display content.

Overview

Examples

<Dialog>
  <Button>Open drawer</Button>
  <Drawer>
    <DialogContent>Drawer content</DialogContent>
  </Drawer>
</Dialog>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/drawer

Usage

Use drawers to display content that slides in from the edge of the screen.

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Drawer } from "@/components/ui/drawer";

<Dialog>
  <Button>Open Drawer</Button>
  <Drawer placement="bottom">
    <DialogContent>Drawer content</DialogContent>
  </Drawer>
</Dialog>

Playground

Use the controls below to experiment with different drawer props and see the live preview and code update.

placement

<Dynamic(Dialog)>
  <Dynamic(Button)>Open Drawer</Dynamic(Button)>
  <Dynamic(Drawer) placement="bottom">
    <Dynamic(DialogContent)>
      <Dynamic(DialogHeader)>
        <Dynamic(DialogHeading)>Drawer Title</Dynamic(DialogHeading)>
        <Dynamic(DialogDescription)>This is a drawer description.</Dynamic(DialogDescription)>
      </Dynamic(DialogHeader)>
      <Dynamic(DialogBody)>
        <p>Drawer content goes here.</p>
      </Dynamic(DialogBody)>
      <Dynamic(DialogFooter)>
        <Dynamic(Button) slot="close">Close</Dynamic(Button)>
      </Dynamic(DialogFooter)>
    </Dynamic(DialogContent)>
  </Dynamic(Drawer)>
</Dynamic(Dialog)>

API Reference

Missing description.

Prop	Type	Default
	`union`	`'bottom'`
	`boolean`	`—`
	`boolean`	`—`
	`Element`	`document.body`
	`boolean`	`false`
	`boolean`	`false`
	`((element: Element) => boolean)`	`—`
	`ReactNode \| function`	`—`

dotUI

Drawer

Installation

Usage

Playground

placement

API Reference

On this page

On this page

dotUI

Product

Community

Support