Sheet

import { Button } from "@/components/ui/button";
import {
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { TextField } from "@/components/ui/text-field";

export default function SheetDemo() {
  return (
    <SheetTrigger>
      <Button variant="outline">Edit profile</Button>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Changes are visible to everyone in your workspace.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 p-5">
          <TextField label="Name" defaultValue="Sofia Martins" />
          <TextField label="Username" prefix="@" defaultValue="sofiam" />
          <TextField label="Title" defaultValue="Product designer" />
        </div>
        <SheetFooter>
          <SheetClose>Cancel</SheetClose>
          <SheetClose variant="solid">Save changes</SheetClose>
        </SheetFooter>
      </SheetContent>
    </SheetTrigger>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/sheet

The CLI installs dependencies and any other components this one uses.

Usage

tsx

import {
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

tsx

<SheetTrigger>
  <Button>Open</Button>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    <div className="p-5">{/* content */}</div>
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</SheetTrigger>

SheetTrigger connects the first child (any pressable, usually a Button) to the SheetContent after it. No state or refs needed.

The body is yours to pad

SheetHeader and SheetFooter bring their own padding and borders, but the panel itself has none, so full-bleed lists and navigation are easy. Wrap the content between them in a div with p-5, and add min-h-0 flex-1 overflow-y-auto when it can grow taller than the screen.

When to use

Sheet — secondary or longer content that relates to the current page: filters, a cart, a record's details, mobile navigation.
Dialog — a short, focused task or confirmation that belongs in the middle of the screen.
Popover — small, non-blocking content anchored to its trigger.
Sidebar — persistent navigation that stays on screen.

Anatomy

tsx

<SheetTrigger>
  <Button />                   {/* trigger */}
  <SheetContent>               {/* overlay + sliding panel + dialog */}
    <SheetHeader>
      <SheetTitle />           {/* accessible name */}
      <SheetDescription />
    </SheetHeader>
    <div />                    {/* your content */}
    <SheetFooter>
      <SheetClose />           {/* button that closes the sheet */}
    </SheetFooter>
  </SheetContent>
</SheetTrigger>

Part	Renders	Notes
`SheetTrigger`	—	Manages open state and wires the trigger to the sheet. Same as `DialogTrigger`.
`SheetContent`	`ModalOverlay` › `Modal` › `Dialog`	Backdrop, sliding panel and the `role="dialog"` element, a flex column that fills the panel. Adds a close icon by default.
`SheetHeader`	`<div>`	Title and description, with `p-5`, a bottom border and room for the close icon.
`SheetTitle`	`Heading` (`slot="title"`)	Becomes the sheet's accessible name.
`SheetDescription`	`<p>`	Supporting text.
`SheetFooter`	`<div>`	Actions pinned to the bottom with `mt-auto` and a top border. Stacked (primary on top) on mobile, right-aligned from `sm` up.
`SheetClose`	`Button slot="close"`	Any button with `slot="close"` closes the sheet. Defaults to `outline`.
Close icon	`<button>`	The top-right ✕. Rendered unless `showCloseButton={false}`.

Examples

Sides

right (default) and left suit detail panels and navigation; bottom suits mobile action sheets; top suits announcements and search. Each side slides in from its own edge.

import { Button } from "@/components/ui/button";
import {
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

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

export default function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {sides.map((side) => (
        <SheetTrigger key={side}>
          <Button variant="outline" className="capitalize">
            {side}
          </Button>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle className="capitalize">{side} sheet</SheetTitle>
              <SheetDescription>
                This sheet slides in from the {side} edge of the screen.
              </SheetDescription>
            </SheetHeader>
            <p className="p-5 text-muted-foreground text-sm">
              Press Esc or click the backdrop to close it.
            </p>
          </SheetContent>
        </SheetTrigger>
      ))}
    </div>
  );
}

Sizes

size sets the maximum width of left and right sheets from the sm breakpoint up: sm (320px), md (384px, default) and lg (576px). On phones they take 75% of the screen. top and bottom sheets are full width and size to their content.

import { Button } from "@/components/ui/button";
import {
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const sizes = [
  { size: "sm", width: "320px" },
  { size: "md", width: "384px" },
  { size: "lg", width: "576px" },
] as const;

export default function SheetSizes() {
  return (
    <div className="flex gap-2">
      {sizes.map(({ size, width }) => (
        <SheetTrigger key={size}>
          <Button variant="outline" className="uppercase">
            {size}
          </Button>
          <SheetContent size={size}>
            <SheetHeader>
              <SheetTitle>Size {size}</SheetTitle>
              <SheetDescription>
                {width} wide from the sm breakpoint up, and 75% of the screen on
                phones.
              </SheetDescription>
            </SheetHeader>
          </SheetContent>
        </SheetTrigger>
      ))}
    </div>
  );
}

Scrollable content

The panel is always the full height of the screen. Give the content min-h-0 flex-1 overflow-y-auto so it scrolls while the header and footer stay in place.

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const releases = [
  {
    version: "3.8.0",
    date: "Sep 24",
    tag: "Feature",
    notes: [
      "Saved views can now be shared with guests.",
      "Added keyboard shortcuts for switching projects.",
      "Export dashboards as PNG.",
    ],
  },
  {
    version: "3.7.2",
    date: "Sep 10",
    tag: "Fix",
    notes: [
      "Fixed timezone drift in recurring reports.",
      "Charts no longer flicker when resizing the sidebar.",
    ],
  },
  {
    version: "3.7.0",
    date: "Aug 28",
    tag: "Feature",
    notes: [
      "New audit log with 90-day retention.",
      "Bulk-edit labels from the table view.",
      "SAML single sign-on for Business plans.",
    ],
  },
  {
    version: "3.6.1",
    date: "Aug 14",
    tag: "Fix",
    notes: [
      "Improved CSV import for files over 50 MB.",
      "Fixed a crash when pasting rich text into comments.",
    ],
  },
  {
    version: "3.6.0",
    date: "Jul 30",
    tag: "Feature",
    notes: [
      "Dark mode for embedded dashboards.",
      "Webhooks now retry with exponential backoff.",
      "Filter by custom fields in search.",
    ],
  },
  {
    version: "3.5.0",
    date: "Jul 12",
    tag: "Feature",
    notes: [
      "Goals: track targets against any metric.",
      "Slack notifications for goal milestones.",
    ],
  },
];

export default function SheetScrollable() {
  return (
    <SheetTrigger>
      <Button variant="outline">What's new</Button>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Changelog</SheetTitle>
          <SheetDescription>
            Everything we shipped this quarter.
          </SheetDescription>
        </SheetHeader>
        <div className="min-h-0 flex-1 overflow-y-auto p-5">
          <ol className="grid gap-6">
            {releases.map((r) => (
              <li key={r.version} className="grid gap-2">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-sm">v{r.version}</span>
                  <Badge size="sm" color={r.tag === "Fix" ? "warning" : "info"}>
                    {r.tag}
                  </Badge>
                  <span className="ml-auto text-muted-foreground text-xs">
                    {r.date}
                  </span>
                </div>
                <ul className="list-disc space-y-1 pl-5 text-muted-foreground text-sm">
                  {r.notes.map((n) => (
                    <li key={n}>{n}</li>
                  ))}
                </ul>
              </li>
            ))}
          </ol>
        </div>
        <SheetFooter>
          <SheetClose className="w-full">Close</SheetClose>
        </SheetFooter>
      </SheetContent>
    </SheetTrigger>
  );
}

Forms

Use the render-function child, ({ close }) => …, and wrap everything in a React Aria Form with flex min-h-0 flex-1 flex-col so the footer stays at the bottom. Validation runs before onSubmit; close the sheet once the request succeeds.

import { useState } from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Select, SelectItem } from "@/components/ui/select";
import {
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { TextField } from "@/components/ui/text-field";
import { TextareaField } from "@/components/ui/textarea";
import { toast } from "@/components/ui/toast";

export default function SheetForm() {
  const [pending, setPending] = useState(false);
  return (
    <SheetTrigger>
      <Button>New issue</Button>
      <SheetContent size="lg">
        {({ close }) => (
          <Form
            className="flex min-h-0 flex-1 flex-col"
            onSubmit={async (e) => {
              e.preventDefault();
              setPending(true);
              await new Promise((r) => setTimeout(r, 1000));
              setPending(false);
              close();
              toast.success("Issue ENG-482 created");
            }}
          >
            <SheetHeader>
              <SheetTitle>Create issue</SheetTitle>
              <SheetDescription>
                Issues are added to the Engineering backlog.
              </SheetDescription>
            </SheetHeader>
            <div className="grid min-h-0 flex-1 content-start gap-4 overflow-y-auto p-5">
              <TextField
                label="Title"
                name="title"
                isRequired
                autoFocus
                placeholder="Checkout button unresponsive on Safari"
              />
              <TextareaField
                label="Description"
                name="description"
                rows={5}
                placeholder="Steps to reproduce, expected and actual behavior…"
              />
              <div className="grid grid-cols-2 gap-4">
                <Select
                  label="Priority"
                  name="priority"
                  defaultSelectedKey="medium"
                >
                  <SelectItem id="urgent">Urgent</SelectItem>
                  <SelectItem id="high">High</SelectItem>
                  <SelectItem id="medium">Medium</SelectItem>
                  <SelectItem id="low">Low</SelectItem>
                </Select>
                <Select
                  label="Assignee"
                  name="assignee"
                  isRequired
                  placeholder="Choose"
                >
                  <SelectItem id="dana">Dana Kim</SelectItem>
                  <SelectItem id="omar">Omar Haddad</SelectItem>
                  <SelectItem id="lucia">Lucía Ferrer</SelectItem>
                </Select>
              </div>
            </div>
            <SheetFooter>
              <SheetClose isDisabled={pending}>Cancel</SheetClose>
              <Button type="submit" isPending={pending}>
                Create issue
              </Button>
            </SheetFooter>
          </Form>
        )}
      </SheetContent>
    </SheetTrigger>
  );
}

Controlled

Render SheetContent without a trigger and control it with isOpen and onOpenChange. Use this to open a detail panel from a list row, a table or a keyboard shortcut. Focus returns to the row that opened it.

import { ChevronRightIcon } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

const orders = [
  {
    id: "#10432",
    customer: "Harper Lewis",
    total: "$248.00",
    status: "Paid",
    items: 3,
    placed: "Sep 27, 2026",
  },
  {
    id: "#10431",
    customer: "Mateo García",
    total: "$89.50",
    status: "Refunded",
    items: 1,
    placed: "Sep 26, 2026",
  },
  {
    id: "#10430",
    customer: "Aisha Bello",
    total: "$1,120.00",
    status: "Paid",
    items: 6,
    placed: "Sep 26, 2026",
  },
];

type Order = (typeof orders)[number];

export default function SheetControlled() {
  const [order, setOrder] = useState<Order | null>(null);
  return (
    <>
      <ul className="w-full max-w-sm divide-y rounded-lg border bg-card">
        {orders.map((o) => (
          <li key={o.id}>
            <Button
              variant="ghost"
              className="h-auto w-full justify-between rounded-none px-3 py-2.5 font-normal"
              onPress={() => setOrder(o)}
            >
              <span className="flex flex-col items-start">
                <span className="font-medium">{o.customer}</span>
                <span className="text-muted-foreground text-xs">{o.id}</span>
              </span>
              <span className="flex items-center gap-2 tabular-nums">
                {o.total}
                <ChevronRightIcon className="text-muted-foreground" />
              </span>
            </Button>
          </li>
        ))}
      </ul>
      <SheetContent
        isOpen={order !== null}
        onOpenChange={(isOpen) => !isOpen && setOrder(null)}
      >
        {order && (
          <>
            <SheetHeader>
              <SheetTitle>Order {order.id}</SheetTitle>
              <SheetDescription>Placed {order.placed}</SheetDescription>
            </SheetHeader>
            <dl className="grid grid-cols-2 gap-x-4 gap-y-3 p-5 text-sm">
              <dt className="text-muted-foreground">Customer</dt>
              <dd>{order.customer}</dd>
              <dt className="text-muted-foreground">Status</dt>
              <dd>
                <Badge
                  size="sm"
                  color={order.status === "Paid" ? "success" : "neutral"}
                >
                  {order.status}
                </Badge>
              </dd>
              <dt className="text-muted-foreground">Items</dt>
              <dd>{order.items}</dd>
              <dt className="text-muted-foreground">Total</dt>
              <dd className="font-medium tabular-nums">{order.total}</dd>
            </dl>
            <SheetFooter>
              <SheetClose>Close</SheetClose>
              <Button>View invoice</Button>
            </SheetFooter>
          </>
        )}
      </SheetContent>
    </>
  );
}

Non-dismissable

isDismissable={false} ignores backdrop clicks, isKeyboardDismissDisabled ignores Esc, and showCloseButton={false} hides the ✕. Reserve this for work that must finish, and always leave a visible way out once it has.

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { ProgressBar } from "@/components/ui/progress-bar";
import {
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

export default function SheetNonDismissable() {
  const [isOpen, setOpen] = useState(false);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (!isOpen) return;
    setProgress(0);
    const id = setInterval(
      () => setProgress((p) => Math.min(100, p + 10)),
      400,
    );
    return () => clearInterval(id);
  }, [isOpen]);

  const done = progress === 100;

  return (
    <>
      <Button variant="outline" onPress={() => setOpen(true)}>
        Import contacts
      </Button>
      <SheetContent
        side="bottom"
        isOpen={isOpen}
        onOpenChange={setOpen}
        isDismissable={false}
        isKeyboardDismissDisabled={!done}
        showCloseButton={false}
      >
        <div className="mx-auto w-full max-w-lg">
          <SheetHeader className="border-b-0 pr-5">
            <SheetTitle>
              {done ? "Import complete" : "Importing contacts…"}
            </SheetTitle>
            <SheetDescription>
              {done
                ? "2,480 contacts were added to your audience."
                : "Keep this open until the import finishes."}
            </SheetDescription>
          </SheetHeader>
          <div className="px-5 pb-5">
            <ProgressBar aria-label="Import progress" value={progress} />
          </div>
          <SheetFooter className="border-t-0 pt-0">
            <Button isDisabled={!done} onPress={() => setOpen(false)}>
              Done
            </Button>
          </SheetFooter>
        </div>
      </SheetContent>
    </>
  );
}

Recipes

A left sheet with CheckboxGroup, Slider, RadioGroup and Switch. Edits go into a draft that's only applied on "Show results"; "Reset" restores the defaults, and the trigger shows how many filters are active.

import { SlidersHorizontalIcon } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
import { Radio, RadioGroup } from "@/components/ui/radio-group";
import {
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";

const defaults = {
  categories: ["jackets"],
  price: [40, 240] as number[],
  sort: "popular",
  inStock: true,
};

export default function SheetRecipeFilters() {
  const [applied, setApplied] = useState(defaults);
  const [draft, setDraft] = useState(defaults);
  const count = applied.categories.length + (applied.inStock ? 1 : 0);

  return (
    <SheetTrigger onOpenChange={(open) => open && setDraft(applied)}>
      <Button variant="outline">
        <SlidersHorizontalIcon /> Filters
        {count > 0 && (
          <Badge size="sm" color="brand" shape="pill">
            {count}
          </Badge>
        )}
      </Button>
      <SheetContent side="left" size="sm">
        {({ close }) => (
          <>
            <SheetHeader>
              <SheetTitle>Filters</SheetTitle>
              <SheetDescription>Narrow down 1,204 products.</SheetDescription>
            </SheetHeader>
            <div className="grid min-h-0 flex-1 content-start gap-6 overflow-y-auto p-5">
              <CheckboxGroup
                label="Category"
                value={draft.categories}
                onChange={(categories) => setDraft({ ...draft, categories })}
              >
                <Checkbox value="jackets">Jackets</Checkbox>
                <Checkbox value="knitwear">Knitwear</Checkbox>
                <Checkbox value="shirts">Shirts</Checkbox>
                <Checkbox value="trousers">Trousers</Checkbox>
              </CheckboxGroup>
              <Slider
                label="Price"
                minValue={0}
                maxValue={400}
                step={10}
                value={draft.price}
                onChange={(price) => setDraft({ ...draft, price })}
                formatOptions={{
                  style: "currency",
                  currency: "USD",
                  maximumFractionDigits: 0,
                }}
              />
              <RadioGroup
                label="Sort by"
                value={draft.sort}
                onChange={(sort) => setDraft({ ...draft, sort })}
              >
                <Radio value="popular">Most popular</Radio>
                <Radio value="newest">Newest</Radio>
                <Radio value="price">Price: low to high</Radio>
              </RadioGroup>
              <Switch
                isSelected={draft.inStock}
                onChange={(inStock) => setDraft({ ...draft, inStock })}
              >
                In stock only
              </Switch>
            </div>
            <SheetFooter className="sm:justify-between">
              <Button variant="ghost" onPress={() => setDraft(defaults)}>
                Reset
              </Button>
              <Button
                onPress={() => {
                  setApplied(draft);
                  close();
                }}
              >
                Show results
              </Button>
            </SheetFooter>
          </>
        )}
      </SheetContent>
    </SheetTrigger>
  );
}

A hamburger button that opens a left sheet with navigation links, an account footer and no header. Without a SheetTitle, the sheet is named with aria-label. Links close the sheet through close() from the render function.

Home

import {
  BarChart3Icon,
  FolderIcon,
  HomeIcon,
  InboxIcon,
  MenuIcon,
  SettingsIcon,
  UsersIcon,
} from "lucide-react";
import { Link } from "react-aria-components";
import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SheetContent, SheetTrigger } from "@/components/ui/sheet";

const nav = [
  { label: "Home", icon: HomeIcon, current: true },
  { label: "Inbox", icon: InboxIcon, badge: "12" },
  { label: "Projects", icon: FolderIcon },
  { label: "Reports", icon: BarChart3Icon },
  { label: "Team", icon: UsersIcon },
];

export default function SheetRecipeMobileNav() {
  return (
    <div className="flex w-full max-w-sm items-center gap-2 rounded-lg border bg-card px-2 py-1.5">
      <SheetTrigger>
        <Button variant="ghost" size="icon" aria-label="Open navigation">
          <MenuIcon />
        </Button>
        <SheetContent side="left" size="sm" aria-label="Navigation">
          {({ close }) => (
            <nav className="flex h-full flex-col gap-1 p-3">
              <div className="flex items-center gap-2 px-2 pt-1 pb-4 font-semibold">
                <div className="size-6 rounded-md bg-brand" />
                Northwind
              </div>
              {nav.map((item) => (
                <Link
                  key={item.label}
                  href={`#${item.label.toLowerCase()}`}
                  onPress={close}
                  aria-current={item.current ? "page" : undefined}
                  className="flex items-center gap-3 rounded-md px-2 py-2 text-muted-foreground text-sm outline-none data-focus-visible:ring-[3px] data-focus-visible:ring-ring/25 data-hovered:bg-muted data-hovered:text-foreground aria-[current=page]:bg-muted aria-[current=page]:font-medium aria-[current=page]:text-foreground"
                >
                  <item.icon className="size-4" />
                  {item.label}
                  {item.badge && (
                    <Badge size="sm" className="ml-auto">
                      {item.badge}
                    </Badge>
                  )}
                </Link>
              ))}
              <div className="mt-auto flex items-center gap-3 border-t px-2 pt-3">
                <Avatar size="sm" alt="Rina Patel" fallback="RP" colorful />
                <div className="min-w-0 flex-1 text-sm">
                  <p className="truncate font-medium">Rina Patel</p>
                  <p className="truncate text-muted-foreground text-xs">
                    rina@northwind.io
                  </p>
                </div>
                <Button
                  variant="ghost"
                  size="icon-sm"
                  aria-label="Settings"
                  onPress={close}
                >
                  <SettingsIcon />
                </Button>
              </div>
            </nav>
          )}
        </SheetContent>
      </SheetTrigger>
      <span className="font-semibold text-sm">Home</span>
    </div>
  );
}

Shopping cart

A cart with quantity steppers and a scrollable item list, and a footer that stacks the subtotal above a full-width checkout button.

import { MinusIcon, PlusIcon, ShoppingBagIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const initial = [
  {
    id: "tee",
    name: "Organic cotton tee",
    variant: "Oat · M",
    price: 32,
    qty: 2,
  },
  { id: "cap", name: "Six-panel cap", variant: "Forest", price: 28, qty: 1 },
  { id: "tote", name: "Canvas tote", variant: "Natural", price: 24, qty: 1 },
];

const usd = (n: number) =>
  n.toLocaleString("en-US", { style: "currency", currency: "USD" });

export default function SheetRecipeCart() {
  const [items, setItems] = useState(initial);
  const count = items.reduce((n, i) => n + i.qty, 0);
  const subtotal = items.reduce((n, i) => n + i.qty * i.price, 0);

  const setQty = (id: string, qty: number) =>
    setItems((list) =>
      qty <= 0
        ? list.filter((i) => i.id !== id)
        : list.map((i) => (i.id === id ? { ...i, qty } : i)),
    );

  return (
    <SheetTrigger>
      <Button variant="outline">
        <ShoppingBagIcon /> Cart ({count})
      </Button>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Your cart</SheetTitle>
          <SheetDescription>
            {count === 0 ? "Your cart is empty." : `${count} items`}
          </SheetDescription>
        </SheetHeader>
        <ul className="min-h-0 flex-1 divide-y overflow-y-auto px-5">
          {items.map((item) => (
            <li key={item.id} className="flex gap-3 py-4">
              <div className="size-16 shrink-0 rounded-md bg-muted" />
              <div className="flex min-w-0 flex-1 flex-col gap-2">
                <div className="flex justify-between gap-2 text-sm">
                  <div className="min-w-0">
                    <p className="truncate font-medium">{item.name}</p>
                    <p className="text-muted-foreground text-xs">
                      {item.variant}
                    </p>
                  </div>
                  <p className="tabular-nums">{usd(item.price * item.qty)}</p>
                </div>
                <div className="flex items-center gap-1">
                  <Button
                    variant="outline"
                    size="icon-xs"
                    aria-label={`Decrease ${item.name}`}
                    onPress={() => setQty(item.id, item.qty - 1)}
                  >
                    <MinusIcon />
                  </Button>
                  <span className="w-6 text-center text-sm tabular-nums">
                    {item.qty}
                  </span>
                  <Button
                    variant="outline"
                    size="icon-xs"
                    aria-label={`Increase ${item.name}`}
                    onPress={() => setQty(item.id, item.qty + 1)}
                  >
                    <PlusIcon />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon-xs"
                    color="danger"
                    className="ml-auto"
                    aria-label={`Remove ${item.name}`}
                    onPress={() => setQty(item.id, 0)}
                  >
                    <Trash2Icon />
                  </Button>
                </div>
              </div>
            </li>
          ))}
        </ul>
        <SheetFooter className="flex-col sm:flex-col sm:justify-start">
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Subtotal</span>
            <span className="font-medium tabular-nums">{usd(subtotal)}</span>
          </div>
          <p className="text-muted-foreground text-xs">
            Shipping and taxes are calculated at checkout.
          </p>
          <Button className="w-full" isDisabled={count === 0}>
            Checkout
          </Button>
        </SheetFooter>
      </SheetContent>
    </SheetTrigger>
  );
}

Accessibility

Focus moves into the sheet on open (to the first focusable element, or one with autoFocus), stays trapped inside, and returns to the trigger on close.
Page scroll is locked while open, and content outside is hidden from screen readers.
SheetTitle provides the accessible name. Without a visible title, pass aria-label to SheetContent.
The close icon has aria-label="Close".
Nested overlays (selects, menus, popovers) inside a sheet work as expected; Esc closes the innermost one first.

Keyboard

Key	Action
`Tab` / `Shift`+`Tab`	Cycles focus within the sheet
`Esc`	Closes the sheet (unless `isKeyboardDismissDisabled`)

Styling

Data attributes

Attribute	On	Present when
`data-entering`	overlay, panel	Opening animation is running
`data-exiting`	overlay, panel	Closing animation is running

Enter and exit animations are tw-animate-css slide classes keyed off these attributes (300ms in, 200ms out), so React Aria waits for them before unmounting.

Slots

`data-slot`	Element
`sheet-overlay`	Backdrop
`sheet-content`	Sliding panel
`sheet-header`	Header
`sheet-footer`	Footer
`dialog-title`, `dialog-description`	Title and description (shared with Dialog)

Customizing

className on SheetContent styles the panel: override the width with sm:max-w-md, or cap a bottom sheet with max-h-[80dvh].
The panel is fixed flex flex-col bg-popover with a border on the inner edge. The inner dialog is a relative flex h-full flex-col, so children stack from top to bottom and SheetFooter sits at the bottom. It scrolls as a whole as a fallback when you don't give the content its own scroll area.
The backdrop reuses overlayStyles from Dialog.

`sheetVariants`

The tailwind-variants function behind the panel. Use it to build your own edge panels.

tsx

import { sheetVariants } from "@/components/ui/sheet";

sheetVariants({ side: "left", size: "lg" });

Also accepts the other props of React Aria's ModalOverlay.

SheetClose

A Button with slot="close". Accepts every button prop.

Prop

Type

Dialog — a centered modal for focused tasks.
Popover — non-modal content anchored to a trigger.
Sidebar — persistent app navigation.
Toast — confirm the result after the sheet closes.