Sheet

A panel that slides in from the edge of the screen, anchored to one side. Built on base-ui Dialog — it is a modal dialog styled as a side drawer, so it inherits focus trapping, scroll locking, the backdrop, and Esc-to-close for free.

Compose the same parts as a Dialog: Sheet (root, owns open state), SheetTrigger (opens it), SheetContent (the drawer surface, takes side and size), and the layout helpers SheetHeader, SheetTitle, SheetDescription, SheetFooter, and SheetClose.

Reach for a Sheet over a Dialog when the content is long, scrollable, or secondary to the page behind it — order detail, an activity log, or a filter panel that the user scans against the list still visible at the edge. Keep a centered Dialog for short, focused decisions (confirm, a small form).

Default

Sheet is uncontrolled — SheetTrigger toggles it. SheetContent defaults to side="right". Put the title and summary in a SheetHeader, the scrollable body in a flex-1 overflow-y-auto region, and the actions in a SheetFooter (which pins itself to the bottom via mt-auto).

import {
  Button,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@vesyl/ui-next";

export default function SheetDefault() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>View order</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Order #VSL-10482</SheetTitle>
          <SheetDescription>
            Placed Jun 1, 2026 · Acme Supply Co.
          </SheetDescription>
        </SheetHeader>
        <div className="flex-1 overflow-y-auto px-6 text-sm">
          <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-3">
            <dt className="text-muted-foreground">Status</dt>
            <dd>Awaiting fulfillment</dd>
            <dt className="text-muted-foreground">Ship to</dt>
            <dd>1200 Harbor Blvd, Oakland, CA 94607</dd>
            <dt className="text-muted-foreground">Service</dt>
            <dd>USPS Ground Advantage</dd>
            <dt className="text-muted-foreground">Items</dt>
            <dd>3 SKUs · 7 units</dd>
            <dt className="text-muted-foreground">Weight</dt>
            <dd>4 lb 6 oz</dd>
          </dl>
        </div>
        <SheetFooter>
          <SheetClose render={<Button variant="ghost" />}>Close</SheetClose>
          <Button>Buy label</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Sides

side anchors the drawer to one edge: "right" (default), "left", "top", or "bottom". Left/right sheets fill the viewport height; top/bottom sheets fill its width and auto-size their height to the content.

import {
  Button,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@vesyl/ui-next";

const sides = ["right", "left", "top", "bottom"] as const;

export default function SheetSides() {
  return (
    <div className="flex flex-wrap gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" className="capitalize" />}>
            {side}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle className="capitalize">{side} sheet</SheetTitle>
              <SheetDescription>
                Slides in from the {side} edge of the viewport.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose render={<Button variant="ghost" />}>Close</SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  );
}

Size

size sets the drawer width on sm+ screens — sm (default) through 4xl, plus full. It only applies to side="left" and side="right"; top and bottom sheets ignore it and size to their content. Widen the sheet for forms and multi-column detail, like this filter panel.

import {
  Button,
  Label,
  NativeSelect,
  NativeSelectOption,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@vesyl/ui-next";
import { SlidersHorizontal } from "lucide-react";

export default function SheetFilters() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <SlidersHorizontal />
        Filters
      </SheetTrigger>
      <SheetContent size="md">
        <SheetHeader>
          <SheetTitle>Filter orders</SheetTitle>
          <SheetDescription>
            Narrow the order queue before exporting or assigning to a picker.
          </SheetDescription>
        </SheetHeader>
        <form
          className="flex-1 overflow-y-auto px-6 grid gap-4"
          onSubmit={(e) => e.preventDefault()}
        >
          <div className="grid gap-2">
            <Label htmlFor="filter-status">Status</Label>
            <NativeSelect id="filter-status" defaultValue="awaiting">
              <NativeSelectOption value="all">All orders</NativeSelectOption>
              <NativeSelectOption value="awaiting">Awaiting fulfillment</NativeSelectOption>
              <NativeSelectOption value="picking">In picking</NativeSelectOption>
              <NativeSelectOption value="shipped">Shipped</NativeSelectOption>
            </NativeSelect>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="filter-carrier">Carrier</Label>
            <NativeSelect id="filter-carrier" defaultValue="any">
              <NativeSelectOption value="any">Any carrier</NativeSelectOption>
              <NativeSelectOption value="usps">USPS</NativeSelectOption>
              <NativeSelectOption value="ups">UPS</NativeSelectOption>
              <NativeSelectOption value="fedex">FedEx</NativeSelectOption>
            </NativeSelect>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="filter-warehouse">Warehouse</Label>
            <NativeSelect id="filter-warehouse" defaultValue="oak">
              <NativeSelectOption value="oak">Oakland, CA</NativeSelectOption>
              <NativeSelectOption value="atl">Atlanta, GA</NativeSelectOption>
              <NativeSelectOption value="dfw">Dallas, TX</NativeSelectOption>
            </NativeSelect>
          </div>
        </form>
        <SheetFooter className="flex-row justify-end">
          <SheetClose render={<Button variant="ghost" />}>Reset</SheetClose>
          <SheetClose render={<Button />}>Apply filters</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Controlled

Sheet is uncontrolled by default. To drive it yourself — open it from a row action, or close it after a mutation resolves — pass open and onOpenChange.

const [open, setOpen] = useState(false);

<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent>
    {/* … */}
    <SheetFooter>
      <Button onClick={() => setOpen(false)}>Done</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>;

Reference

Sheet

Root container. Extends base-ui Dialog.Root props.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`open`	`boolean`	—	Open state (controlled)
`onOpenChange`	`(open: boolean) => void`	—	Fires when the open state changes
`modal`	`boolean`	`true`	Trap focus and block the page behind it

SheetTrigger

Opens the sheet. Extends base-ui Dialog.Trigger props. Pass render to use a Button (or any element) as the trigger.

Prop	Type	Default	Description
`render`	`ReactElement`	—	Element to render as the trigger

SheetContent

The drawer surface. Extends base-ui Dialog.Popup props. Renders its own portal, backdrop, and close button.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Edge the sheet is anchored to and slides in from
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "full"`	`"sm"`	Width on `sm`+ screens; applies to `left`/`right` sides only
`showCloseButton`	`boolean`	`true`	Render the floating close button in the top-right corner
`className`	`string`	—	Merged onto the popup

SheetHeader

A flex flex-col container with padding for the title and description. Extends div props.

SheetTitle

The accessible title. Extends base-ui Dialog.Title props.

SheetDescription

Supporting text under the title, wired as the dialog’s accessible description. Extends base-ui Dialog.Description props.

SheetFooter

A flex flex-col container pinned to the bottom via mt-auto, for actions. Extends div props.

SheetClose

Closes the sheet. Extends base-ui Dialog.Close props. Pass render to use a Button as the close action.

Prop	Type	Default	Description
`render`	`ReactElement`	—	Element to render as the close control