Overlays

Sheet

A side or bottom panel that keeps the page visible.

@codeways/ui/sheet

Sides and sizes

A task that benefits from keeping the page visible - a styled Dialog, no separate Radix primitive.

right

left

bottom

lg (right)

Usage

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter } from "@codeways/ui/sheet";

<Sheet>
  <SheetTrigger asChild><Button variant="secondary">Open</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader><SheetTitle>Time entry</SheetTitle></SheetHeader>
    <SheetBody>...</SheetBody>
  </SheetContent>
</Sheet>