Sheet

React Sheet components are used to display a panel that slides from one of the screen's edges. They provide a versatile way to offer additional information, context-sensitive menus, or complex forms without forcing the user to navigate away from the current page.

This Sheet component is built with React Aria for accessibility, Tailwind CSS for styling, and supports multiple side variants and highly composable sub-components.

Installation

npx @tailgrids/cli add sheet

Anatomy

The Sheet follows a composable pattern where each part can be styled and arranged manually.

import {
  Sheet,
  SheetTrigger,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetBody,
  SheetFooter,
  SheetClose
} from "@/registry/core/sheet";

export default function SheetAnatomy() {
  return (
    <Sheet>
      <SheetTrigger />
      <SheetOverlay>
        <SheetContent side="right">
          <SheetHeader>
            <SheetTitle />
            <SheetDescription />
          </SheetHeader>
          <SheetBody />
          <SheetFooter>
            <SheetClose />
          </SheetFooter>
        </SheetContent>
      </SheetOverlay>
    </Sheet>
  );
}

Usage

Create a sheet by composing the necessary components inside a root Sheet.

import {
  Sheet,
  SheetTrigger,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription
} from "@/registry/core/sheet";

export default function SheetExample() {
  return (
    <Sheet>
      <SheetTrigger>Open Sheet</SheetTrigger>
      <SheetOverlay>
        <SheetContent side="left">
          <SheetHeader>
            <SheetTitle>Menu</SheetTitle>
            <SheetDescription>
              Navigation for your application.
            </SheetDescription>
          </SheetHeader>
        </SheetContent>
      </SheetOverlay>
    </Sheet>
  );
}

Examples

Custom Sides

The side prop on SheetContent allows you to control the entry point of the sheet. Options are top, right, bottom, and left.

Detailed Forms

Use sheets to display complex editing forms. This keeps the user on the same page while they perform focused tasks.

Mobile Navigation

A common use case for sheets is mobile menus. You can use close with render props to trigger navigation and close the sheet simultaneously.

Long Scrollable Content

Use SheetBody for content that might exceed the screen height. The body will automatically scroll while keeping the header and footer fixed if needed.

API Reference

Sheet

The root component that manages the open/close state of the sheet.

SheetTrigger

The element that opens the sheet when pressed.

SheetOverlay

The backdrop overlay for the sheet. Wraps SheetContent and handles exit animations.

SheetContent

The primary layout component for the sheet panel.

See React Aria Modal API for more details on modalProps.

SheetHeader

A wrapper for the title and description at the top of the sheet.

SheetTitle

The accessible heading for the sheet.

SheetDescription

Secondary text for the sheet header.

SheetBody

A scrollable container for the main content of the sheet.

SheetFooter

An action bar section at the bottom of the sheet.

SheetClose

A specialized button with slot="close" that automatically closes the nearest sheet.

Accessibility

• Focus Management: Focus is automatically trapped inside the sheet when open and restored to the trigger element on close.
• Keyboard Navigation: Pressing Escape or the close trigger closes the sheet.
• ARIA Labeling: SheetTitle uses slot="title" to provide an accessible label for the sheet component.
• Screen Readers: The sheet is announced as a modal overlay, and background content is hidden from assistive technology when open.
• Mobile Optimized: Designed for mobile responsiveness, perfect for replacing complex navigation menus on smaller screens.