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`

The root component that contains all parts of a sheet.

Prop	Type	Default
`defaultOpen`	`boolean`
`modal`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`
`open`	`boolean`

`SheetTrigger`

The button that opens the sheet when clicked.

Prop	Type	Default
`asChild`	`boolean`	`false`

`SheetContent`

The component that contains the sheet’s content.

Inherits properties from HTMLDivElement.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`
`onCloseAutoFocus`	`(event: Event) => void`
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`
`onInteractOutside`	`(event: React.FocusEvent \| MouseEvent \| TouchEvent) => void`
`onOpenAutoFocus`	`(event: Event) => void`
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`
`side`	`"top""right""bottom""left"`	`"right"`

`SheetHeader`

A container for the sheet’s header content.

Inherits properties from HTMLDivElement.

`SheetTitle`

An accessible title to be announced when the dialog is opened.

Inherits properties from HTMLHeadingElement.

Prop	Type	Default
`asChild`	`boolean`	`false`

`SheetDescription`

An optional accessible description to be announced when the dialog is opened. Hide it by passing className="sr-only".

Inherits properties from HTMLParagraphElement.

Prop	Type	Default
`asChild`	`boolean`	`false`

`SheetBody`

A container for the main content of the sheet.

Inherits properties from HTMLDivElement.

`SheetFooter`

A container for the sheet’s footer content.

Inherits properties from HTMLDivElement.

`SheetClose`

A button that closes the sheet when clicked.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`asChild`	`boolean`	`false`