Sheet

A pane that slides out to display content that complements the current view.

Usage

<Sheet> is used to display content that complements the main content of the screen. It slides out from the edge of the viewport.

import { Button } from "stylus-ui/Button";
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetBody,
  SheetFooter,
} from "stylus-ui/Sheet";

export default () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="secondary">Open Sheet</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Sheet Title</SheetTitle>
      </SheetHeader>
      <SheetBody>
        <p>This is the main content of the sheet.</p>
      </SheetBody>
      <SheetFooter>
        <Button variant="secondary">Cancel</Button>
        <Button>Save</Button>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

Controlled state

To control the sheet’s visibility manually, set open and onOpenChange.

import { useState } from "react";
import { Button } from "stylus-ui/Button";
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "stylus-ui/Sheet";

export default () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)} variant="secondary">
        Open Sheet
      </Button>
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Controlled Sheet</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </div>
  );
};

Position

You can control which side the sheet appears from using the side prop on SheetContent.

import { Button } from "stylus-ui/Button";
import { Sheet, SheetTrigger, SheetBody, SheetContent } from "stylus-ui/Sheet";
import {
  faArrowLeft,
  faArrowUp,
  faArrowDown,
  faArrowRight,
} from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex items-center gap-1">
    <Sheet>
      <SheetTrigger asChild>
        <Button icon={faArrowLeft} variant="secondary" />
      </SheetTrigger>
      <SheetContent side="left">
        <SheetBody>
          <p>This sheet slides in from the left side.</p>
        </SheetBody>
      </SheetContent>
    </Sheet>
    <div className="flex flex-col gap-1">
      <Sheet>
        <SheetTrigger asChild>
          <Button icon={faArrowUp} variant="secondary" />
        </SheetTrigger>
        <SheetContent side="top">
          <SheetBody>
            <p>This sheet slides in from the top.</p>
          </SheetBody>
        </SheetContent>
      </Sheet>
      <Sheet>
        <SheetTrigger asChild>
          <Button icon={faArrowDown} variant="secondary" />
        </SheetTrigger>
        <SheetContent side="bottom">
          <SheetBody>
            <p>This sheet slides in from the bottom.</p>
          </SheetBody>
        </SheetContent>
      </Sheet>
    </div>
    <Sheet>
      <SheetTrigger asChild>
        <Button icon={faArrowRight} variant="secondary" />
      </SheetTrigger>
      <SheetContent side="right">
        <SheetBody>
          <p>This sheet slides in from the right side.</p>
        </SheetBody>
      </SheetContent>
    </Sheet>
  </div>
);

Custom close button

The <SheetHeader> component includes a default close button. You can create a custom close button using <SheetClose>.

import { Button } from "stylus-ui/Button";
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetBody,
  SheetClose,
} from "stylus-ui/Sheet";

export default () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="secondary">Open Sheet</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetBody>
        <SheetClose asChild>
          <Button variant="secondary">Close Sheet</Button>
        </SheetClose>
      </SheetBody>
    </SheetContent>
  </Sheet>
);

API Reference

`Sheet`

A pane that slides out to display content that complements the current view.

`defaultOpen`

boolean

`modal`

boolean

`onOpenChange`

(open: boolean) => void

`open`

boolean

`SheetTrigger`

`asChild`

boolean

`SheetClose`

`asChild`

boolean

`SheetPortal`

`container`

null | Element | DocumentFragment

Specify a container element to portal the content into.

`forceMount`

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

`SheetOverlay`

`asChild`

boolean

`forceMount`

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

`SheetContent`

`asChild`

boolean

`forceMount`

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

`onCloseAutoFocus`

(event: Event) => void

Event handler called when auto-focusing on close. Can be prevented.

`onEscapeKeyDown`

(event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented.

`onFocusOutside`

(event: FocusOutsideEvent) => void

Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.

`onInteractOutside`

(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.

`onOpenAutoFocus`

(event: Event) => void

Event handler called when auto-focusing on open. Can be prevented.

`onPointerDownOutside`

(event: PointerDownOutsideEvent) => void

Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.

`side`

null | "bottom" | "top" | "left" | "right" = "right"

`theme`

"light" | "dark" = "light"

Visual theme for the sheet panel.

`SheetBody`

Scrollable body area of a Sheet, rendered between header and footer.

`children`

ReactNode

Content rendered inside the body area.

`SheetHeader`

Top section of a Sheet with a back/close button and title area.

`children`

ReactNode

Header content rendered next to the close button.

`SheetFooter`

Bottom section of a Sheet, typically containing action buttons.

`children`

ReactNode

Footer content (typically action buttons).

`SheetTitle`

`asChild`

boolean

`SheetDescription`

`asChild`

boolean