Sheet

Usage

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

Open Sheet

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.

Open Sheet

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>.

Open Sheet

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