Sheet

A panel that slides in over the page.

Overview

Wraps Base UI's Dialog, so focus trapping, scroll locking, Escape and returning focus to the trigger are handled rather than re-derived per page. The marketing site's small-screen navigation is built from it.

tsx

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "@rogo-technologies/brand/sheet";

<Sheet open={isOpen} onOpenChange={setIsOpen}>
  <SheetTrigger aria-label="Open navigation">…</SheetTrigger>
  <SheetContent side="right">
    <SheetTitle className="sr-only">Navigation</SheetTitle>…
  </SheetContent>
</Sheet>;

Sides

side takes "right" (default), "top" or "bottom". Each slides in from its own edge and returns there on close. right is capped at max-w-sm; the horizontal sides span the viewport.

Always give it a title

SheetTitle is what a screen reader announces when the panel opens. When the design has no visible heading, keep the element and hide it with sr-only rather than dropping it. Base UI warns, and the panel opens unnamed.

Controlled by default

Pass open and onOpenChange so the call site can close the sheet after a navigation. An uncontrolled sheet stays open behind the new page.

PreviousSeparator Dot

NextSkeleton