Overlays

Sheet

Slide out a panel for extra info, like pulling a drawer to find more tools, perfect for additional context without leaving the page..

Basic

A sheet is a modal component that slides in from the side of the screen. It's used to display a small amount of content that is related to the main content.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Sheet comes packed with a variety of components to make it stand out.

Dialog

Dialog's a slick component used in other parts of your project that need dialog, like modal, sheet, color picker, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Like Github

This example is like Github's profile page. You can see the sheet component is used to display the profile information.

Controlled

You can control the open state of the sheet by using the isOpen prop. You can also use the onOpenChange prop to listen to the open state change.

Positioning

You can position the modal component in different ways. You can use the side prop to position the modal component in the different directions.

Custom Close Button

You can customize the close button by using the SheetClose component. This example demonstrates how to use the SheetClose component to create a custom close button.

Float

By default, the sheet will stack, but you can change this behavior by using the isFloat prop. This example demonstrates how to use the isFloat prop to create a sheet that does not stack.

Component "overlays/sheet/sheet-foat-demo" not found in the registry.

Sticky

You can use the Sheet.Body component to make the sheet sticky.

This setup’s super flexible. If you skip adding Sheet.Title and just drop a string as its child, it'll auto-render as the title. Like this:

<Sheet.Header>
  Title
</Sheet.Header>

Wanna customize more? Throw in props like title and description for a tailored header:

<Sheet.Header title='Title' description='Description' />

Custom Styles

To apply custom styles such as background colors or borders to the header, follow this guide:

Class Names

To add custom class names to your content or overlay, refer to this demonstration:

DialogSelect