Sheet

Usage

Sheet is fully composable: you assemble the portal, overlay, panel, and close button yourself, so your app controls layering and every user-facing string (close labels included).

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetOverlay,
  SheetPortal,
  SheetTitle,
  SheetTrigger,
} from '@epilot/spark-ui/sheet'

<Sheet>
  <SheetTrigger
    render={
      <Button styleVariant="surface" color="neutral">
        Open Sheet
      </Button>
    }
  />
  <SheetPortal>
    <SheetOverlay />
    <SheetContent>
      <SheetClose aria-label={t('close')} />
      <SheetHeader>
        <SheetTitle>Filter devices</SheetTitle>
        <SheetDescription>
          Narrow down the device list by type and status.
        </SheetDescription>
      </SheetHeader>
      <SheetFooter>
        <Button>Apply filters</Button>
      </SheetFooter>
    </SheetContent>
  </SheetPortal>
</Sheet>

A bare SheetClose renders the ready-made corner X. Pass a translated aria-label from your app; the library ships no default text. Give it children for a visible text label, or a render prop to merge into your own element, e.g. render={<Button styleVariant="surface" color="neutral">Close</Button>} for a footer button (children would nest a <button> inside the close <button>).

Examples

Sides

Use the side prop (top, right, bottom, left; default right) to control where the sheet slides in from.

Scrollable with sticky footer

The panel is a flex column, so give the body min-h-0 flex-1 overflow-y-auto: it scrolls while the header and footer stay visible.

API Reference

Built on top of Base UI Dialog. See the Base UI documentation for the full API.