Sheet

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download sheet -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import * as React from "react";
export default function SheetExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <Button variant="secondary">Open sheet</Button>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Update your details.</SheetDescription>
        </SheetHeader>
        <SheetClose>Done</SheetClose>
      </SheetContent>
    </Sheet>
  );
}

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• SheetTrigger
• SheetClose
• SheetPortal
• SheetOverlay
• SheetContent
• SheetHeader
• SheetFooter
• SheetTitle
• SheetDescription

Examples

Default

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
<Sheet >
  <Button variant="tertiary">Open</Button>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose type="submit">Save changes</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>;

Sides

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
const sides = ["top", "right", "bottom", "left"] as const;
<div className="grid grid-cols-2 gap-2">
  {sides.map((side) => (
    <Sheet key={side}>
      <Button variant="tertiary">{side}</Button>
      <SheetContent side={side}>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose type="submit">Save changes</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  ))}
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Sheet

SheetContent

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.