Sheet

Components

Sheet

The Sheet component extends the functionality of the Dialog component to display complementary content alongside the main screen. It is ideal for settings interfaces, forms, or supplementary information that enhances the main content without overwhelming the user.

Documentation

Additional Examples

Side

Add the side property to <SheetContent /> to indicate the side of the screen where the component will slide from.

Custom Size

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

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
      <SheetTitle>Are you 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>

Configurable Props

Because the Sheet component is built on top of the Dialog component, you can pass all the props that the Dialog component accepts. Additionally, the Sheet component has some additional props that you can use to customize its behavior.

<SheetTrigger>

Prop	Type	Default/ Options	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

<SheetContent>

Prop	Type	Default/ Options	Description
side	enum ("top" \| "right" \| "bottom" \| "left")	bottom	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

Separator Skeleton