Sheet

A panel that slides out from the edge of the screen.

When To Use

When you need a panel that slides in from the edge of the viewport
For creating side navigation menus, filter panels, or configuration panels
To display additional information without navigating away from the current view
When you need a mobile-friendly alternative to modal dialogs

Examples

Basic#

A basic Sheet component with a trigger button, content, and action buttons.

Side#

Choose side:

A Sheet component with different side options (top, right, bottom, left).

Form#

A Sheet component that contains a form for user input.

Custom#

A Sheet component with custom styling and behavior.

Accessibility

The Sheet component follows WAI-ARIA guidelines for dialog components:

Uses role="dialog" for the sheet
Supports keyboard navigation for opening, closing, and interacting with the sheet
When opened, focus is trapped within the sheet until it is closed
The Escape key closes the sheet
Uses aria-labelledby and aria-describedby to provide context for screen readers

Separator

A visual divider between content or menu items.

Sidebar

A navigation component for displaying menu items and links in a vertical layout.