Sheet

Edge drawer built on the native dialog element.

organismsSource

import { Sheet, SheetTrigger, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose, SheetContent } from '@elirobinson/react/components/organisms/Sheet';

Styles: @elirobinson/react/styles/organisms/Sheet.css — already included when you import @elirobinson/react/styles.css.

Show code

import { useState } from 'react';
import { Button } from '@elirobinson/react/components/atoms/Button';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@elirobinson/react/components/organisms/Sheet';

export default function Basic() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger className="ds-button ds-button--primary">Filter guides</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Filter coaching guides</SheetTitle>
          <SheetDescription>Narrow the list by sport, age group, or session type.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose />
          <Button variant="accent" onClick={() => setOpen(false)}>
            Apply filters
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

When to use it

Use Sheet for a task that needs more room than a Popover but shouldn't take over the whole screen — filters, a detail panel, a settings drawer. It's built on the native <dialog> element, so the focus trap, the backdrop, and Escape-to-close all come from the browser instead of a hand-rolled implementation.

Reach for Dialog instead when the content itself is the task and centering it is the point — a confirmation, a form that should block the rest of the page. A Sheet stays anchored to an edge, which reads as "secondary to what's behind it" even while it's open.

Sides

SheetContent takes a side — left, right, top, or bottom. right is the default, shown above.

Show code

import { useState } from 'react';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@elirobinson/react/components/organisms/Sheet';

const SIDES = ['left', 'right', 'top', 'bottom'] as const;

function SideSheet({ side }: { side: (typeof SIDES)[number] }) {
  const [open, setOpen] = useState(false);
  const label = side.charAt(0).toUpperCase() + side.slice(1);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger className="ds-button ds-button--secondary">{label}</SheetTrigger>
      <SheetContent side={side}>
        <SheetHeader>
          <SheetTitle>Opens from the {side}</SheetTitle>
          <SheetDescription>
            Set side=&quot;{side}&quot; on SheetContent to slide in from this edge.
          </SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose />
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

export default function Sides() {
  return (
    <div className="demo-row">
      {SIDES.map((side) => (
        <SideSheet key={side} side={side} />
      ))}
    </div>
  );
}