Drawer

A panel that comes up from the bottom of the screen and can be dragged back down: the phone's sheet, with a slanted grip at its top.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/drawer

Examples

From the bottom, and from the right

drawer-route.tsx

import { Button } from "@/components/zero/button";import {  Drawer,  DrawerBody,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/zero/drawer";export default function DrawerRoute() {  return (    <div className="flex flex-wrap gap-3">      <Drawer>        <DrawerTrigger render={<Button />}>Show the route</DrawerTrigger>        <DrawerContent>          <DrawerHeader>            <DrawerTitle>Rail yards → North gate</DrawerTitle>            <DrawerDescription>2.4 km · about 18 minutes</DrawerDescription>          </DrawerHeader>          <DrawerBody>            <ol className="grid list-decimal gap-2 ps-5 text-zero-text-2">              <li>Leave the yards by the east side.</li>              <li>Keep to the canal until Tower 9.</li>              <li>Sign for the crate at the north gate.</li>            </ol>          </DrawerBody>          <DrawerFooter>            <DrawerClose render={<Button />}>Start</DrawerClose>            <DrawerClose render={<Button variant="secondary" />}>              Not yet            </DrawerClose>          </DrawerFooter>        </DrawerContent>      </Drawer>      <Drawer side="right">        <DrawerTrigger render={<Button variant="secondary" />}>          From the right        </DrawerTrigger>        <DrawerContent>          <DrawerHeader>            <DrawerTitle>Notes</DrawerTitle>            <DrawerDescription>Swipe it back to the right.</DrawerDescription>          </DrawerHeader>          <DrawerBody>            <p className="text-zero-text-2">Gate 4 is closed after 21:00.</p>          </DrawerBody>        </DrawerContent>      </Drawer>    </div>  );}

Behaviour

It follows the finger while it is swiped, the page behind lightening as it goes, and closes once dragged far or fast enough. side brings it in from another edge; Sheet does that without the swipe. Under reduced motion it only fades.

Props

Drawer

Prop	Type	Default	Description
side	"bottom" \| "top" \| "left" \| "right"	"bottom"	The edge it comes from, and the way it is swiped away.

DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose

Also takes every prop of Base UI's Drawer.Popup.