Sheet

The React Sheet component shows a panel that slides in from the edge of the screen. It is used to display extra content without leaving the current page.

It helps you show things like menus, forms, or details while keeping the main screen visible. For example, you can open a side panel to edit a profile or show navigation on mobile.

Built with React Aria and styled using Tailwind CSS. It supports accessibility and keyboard navigation, and it works well across different screen sizes.

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.

Details 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

• Semantic structure: The sheet appears as an overlay on top of the page, so screen readers treat it as a separate layer.
• Keyboard support: Users can close the sheet using the Escape key or the close button.
• Focus management: Focus is trapped inside the sheet when open and returns to the trigger when it is closed.
• Trigger behavior: The sheet opens from a trigger element and supports custom trigger components.
• Screen reader support: The sheet title and description are announced clearly to explain the panel's purpose.
• Outside interaction: Clicking outside the sheet can close it when dismiss is enabled.