Sheet

A flyout that opens from the side of the screen, based on the dialog component.

import { Button } from "mako-ui/components/button";
import { Field, FieldLabel } from "mako-ui/components/field";
import { Form } from "mako-ui/components/form";
import { Input } from "mako-ui/components/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "mako-ui/components/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open Sheet
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Margaret Welsh" type="text" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
            <Button type="submit">Save</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "mako-ui/components/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
    <SheetPanel>Content</SheetPanel>
    <SheetFooter>
      <SheetClose>Close</SheetClose>
    </SheetFooter>
  </SheetPopup>
</Sheet>

API Reference

Sheet

Root component.

SheetTrigger

Trigger button that opens the sheet.

SheetPopup

Popup container that displays the sheet content. Also exported as SheetContent.

Prop	Type	Default	Description
`side`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`	Controls which side of the screen the sheet opens from
`variant`	`"default" \| "inset"`	`"default"`	Controls the sheet style. `inset` adds spacing around the sheet on desktop screens
`showCloseButton`	`boolean`	`true`	When true, displays a close button in the top-right corner
`closeProps`	`CloseProps`	-	Props forwarded to the internal close button, useful for overriding `aria-label`
`portalProps`	`PortalProps`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.)

Example:

// Right side sheet (default)
<SheetPopup side="right">
  ...
</SheetPopup>
 
// Left side sheet
<SheetPopup side="left">
  ...
</SheetPopup>
 
// Top sheet
<SheetPopup side="top">
  ...
</SheetPopup>
 
// Bottom sheet
<SheetPopup side="bottom">
  ...
</SheetPopup>
 
// Sheet with inset variant
<SheetPopup side="right" variant="inset">
  ...
</SheetPopup>

SheetHeader

Container for the sheet title and description. Supports the render prop for polymorphic composition (e.g. render={<Link href="/" />}).

SheetFooter

Footer section for action buttons. Supports the render prop for polymorphic composition.

Prop	Type	Default	Description
`variant`	`"default" \| "bare"`	`"default"`	Controls the footer styling. `default` includes border and background, `bare` removes them

SheetTitle

Title component.

SheetDescription

Description component.

SheetPanel

Scrollable content container. Automatically wraps content in a ScrollArea component. Supports the render prop for polymorphic composition.

Prop	Type	Default	Description
`scrollFade`	`boolean`	`true`	When true, shows a fade effect at scroll edges

Example:

<SheetPanel>
  {/* Long content that will scroll if it exceeds the sheet height */}
  <div>...</div>
</SheetPanel>

SheetClose

Close button component.

SheetPortal

Portal component for rendering outside the DOM hierarchy.

SheetBackdrop

Backdrop/overlay component. Also exported as SheetOverlay.

Examples

Sheet with Inset

import { Button } from "mako-ui/components/button";
import { Field, FieldLabel } from "mako-ui/components/field";
import { Form } from "mako-ui/components/form";
import { Input } from "mako-ui/components/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "mako-ui/components/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open Sheet
      </SheetTrigger>
      <SheetPopup variant="inset">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Margaret Welsh" type="text" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
            <Button type="submit">Save</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Side sheets

import { Button } from "mako-ui/components/button";
import {
  Sheet,
  SheetDescription,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "mako-ui/components/sheet";

export default function Particle() {
  return (
    <div className="flex flex-wrap gap-2">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Right
        </SheetTrigger>
        <SheetPopup showCloseButton={false}>
          <SheetHeader>
            <SheetTitle>Right</SheetTitle>
            <SheetDescription>Right side of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Left
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="left">
          <SheetHeader>
            <SheetTitle>Left</SheetTitle>
            <SheetDescription>Left side of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Top
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="top">
          <SheetHeader>
            <SheetTitle>Top</SheetTitle>
            <SheetDescription>Top of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Bottom
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="bottom">
          <SheetHeader>
            <SheetTitle>Bottom</SheetTitle>
            <SheetDescription>Bottom of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

On This Page

Usage API Reference Sheet SheetTrigger SheetPopup SheetHeader SheetFooter SheetTitle SheetDescription SheetPanel SheetClose SheetPortal SheetBackdrop Examples Sheet with Inset Side sheets