Sheet

A dialog that slides in from an edge of the screen and holds on to it, the ink border on the edge facing the page.

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/sheet

Examples

From the right, the left, the bottom

sheet-sides.tsx

import { Button } from "@/components/zero/button";import { Input } from "@/components/zero/input";import {  Sheet,  SheetBody,  SheetContent,  SheetDescription,  SheetFooter,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/zero/sheet";export default function SheetSides() {  return (    <>      {(["right", "left", "bottom"] as const).map((side) => (        <Sheet key={side}>          <SheetTrigger render={<Button variant="secondary" />}>            From the {side}          </SheetTrigger>          <SheetContent side={side}>            <SheetHeader>              <SheetTitle>Job details</SheetTitle>              <SheetDescription>Rail yards · 3,100 cr</SheetDescription>            </SheetHeader>            <SheetBody>              <p className="text-zero-text-2">                Escort a sealed crate through the yards to the north gate.              </p>              <Input placeholder="A note for the dispatcher" />            </SheetBody>            <SheetFooter>              <Button>Take it</Button>            </SheetFooter>          </SheetContent>        </Sheet>      ))}    </>  );}

Behaviour

It slides in on the reveal timing and out faster; under reduced motion it only fades. Its footer is pinned to the far end.

Header, title, description and body are the Dialog's own parts, re-exported with Sheet names.

Props

SheetContent

Prop	Type	Default	Description
side	"right" \| "left" \| "top" \| "bottom"	"right"	The edge it slides in from.
showClose	boolean	true	The close button in the corner.

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