Sheet

The Sheet component displays a panel that slides in from the edge of the screen. It’s designed to provide extra information or actions without cluttering the main interface.

A Sheet is often used for details, settings, or supplementary content.

Anatomy

A Sheet is made up of the following parts:

SheetOpen – The element that triggers the sheet to open.

SheetOverlay – A background overlay that appears when the sheet is open.

SheetContent – The main container for the sheet’s content.

SheetTitle – Displays the title of the sheet.
SheetDescription – Provides a brief description or additional details.
SheetClose – The control to close the sheet.

Adding a Sheet

To add a sheet to your project:

Open the Insert Menu and go to Components.

Click or drag the Sheet to your desired location on the page.

Guides

Configuring the Sheet Side

By default, the sheet appears from the right side. To change this:

Select the SheetContent component.

In the Properties Panel, update the side property to the desired value (e.g., top, bottom, left, or right).

Adjusting the Sheet Size

Control the size of the sheet to fit your design requirements:

Select the SheetContent component.

In the Properties Panel, adjust the width, max-width, and height as needed.

Hiding the Title

For accessibility, a title is recommended, but you may choose to hide it visually:

Select the SheetTitle component.

In the Properties Panel, add the sr-only utility class to hide the title while keeping it accessible for screen readers.

Adding Custom Content

You can personalize the sheet by adding your own content—such as forms, lists, or images:

Remove any components you don’t need in the SheetContent.

Insert your desired elements (e.g., Form, Text, Image) into the SheetContent.

Use the Properties Panel to adjust the layout and style of these components.

Customizing the Sheet Trigger

By default, the SheetOpen component consists of a button. You can either style this button or replace it entirely with another component to open your sheet.

To style the default button:

Select the button within the SheetOpen component.

Open the Properties Panel.

Adjust the button’s text, background, border, and spacing settings to fit your design.

To replace the default button:

Remove the existing button within the SheetOpen component.

Open the Insert Menu and choose your desired component (such as an icon or a custom element).

Insert the new component into SheetOpen.

Use the Properties Panel to style the new trigger as needed.

Styling the Sheet Content

You can customize the overall look of the sheet by styling both the content container and the elements within it:

Select the SheetContent component.

Use the Properties Panel to adjust settings such as background color, borders, padding, and any other styles.

Additionally, you can style the inner components (like SheetTitle and SheetDescription) to control typography, spacing, and other visual details.

Properties

Sheet

Property	Type	Default	Description
defaultOpen	`boolean`	`false`	Determines whether the sheet is open or closed when it is initially rendered.
modal	`boolean`	-	When set to `true`, interactions with outside elements will be disabled and only the sheet content will be visible to screen readers.
onOpenChange	`Action`	-	Triggers when sheet is opened or closed

SheetContent

Property	Type	Default	Description
side	`‘top’ \| ‘bottom’ \| ‘left’ \| ‘right'`	`‘right’`	The side of the trigger where the menu will appear.
onEscapeKeyDown	`Action`	-	Callback when the Escape key is pressed.
onPointerDownOutside	`Action`	-	Callback when a click is detected outside the sheet content.
onFocusOutside	`Action`	-	Callback when focus moves outside the sheet content.
onInteractOutside	`Action`	-	Called when an interaction (pointer or focus event) happens outside the bounds of the component.
onCloseAutoFocus	`Action`	-	Event handler called when auto-focusing on close (can be prevented)