💠 Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Usage

The Sheet component, an extension of the Dialog component, is utilized to display supplementary content that is secondary to the main content on a page. It can be presented as a sliding panel from the edges of the screen or as a more traditional modal overlay.

Sheets are often used to show detailed information, additional options, or to house forms and filters that don't need to be in the main content flow.

When to use

• Detail or summary views: Employ a Sheet to display additional details about a selected item from the main content, such as a list item's detailed view or summary.
• Auxiliary actions and options: Use a Sheet to present actions or options related to the main content, such as sharing controls, additional filters, or secondary actions.
• Forms and data input: Sheets can be an effective way to handle forms or data input related to the page's main content without taking the user to a separate page or cluttering the main view.
• Progressive disclosure: Utilize Sheets to progressively disclose information or options as needed, keeping the user's context intact and reducing the cognitive load of too much information at once.

Avoid using Sheets for critical actions or information that users must interact with directly, as their peripheral placement may cause them to be overlooked. Sheets should not be overused, as too many can lead to a cluttered interface and a confusing user experience. They should also not become a catch-all for content that doesn't fit neatly elsewhere; instead, consider whether the content deserves a more central place in the UI or if it can be structured differently.

Examples

Default

Side

Size

You can adjust the size of the sheet using CSS classes:

<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent className="w-96 sm:w-full">
  <SheetHeader>
    <SheetTitle>Are you sure absolutely sure?</SheetTitle>
    <SheetDescription>
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </SheetDescription>
  </SheetHeader>
</SheetContent>
</Sheet>

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Dialog WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions