Sheet

Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@zynactra/ui/sheet"

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Edit</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit client</SheetTitle>
      <SheetDescription>Changes apply to every project.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

Sides

side is right by default. Pass showCloseButton={false} to hide the corner close button.

Detail panel

Clicking a row in a list opens its details. One controlled sheet serves the whole list; the selected item lives in state.

Long form

An edit form longer than the screen. Only the fields scroll; the header and the Save button stay in view.

Guidelines

• Right for detail and edit panels, left for navigation on small screens. Top and bottom are rare on desktop.
• The page behind stays visible on purpose: use a sheet when the user needs that context, a Dialog when they don't.
• On phones, prefer Drawer from the bottom.
• Keep the open state and the selected item separate. Clearing the item on close empties the sheet while it's still sliding out.

API reference

Built on Base UI's Dialog. See the Base UI Dialog docs.