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.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Sheet's decked out with several components to make it bangin'.

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

Import the components and use them as shown below, adapting the structure to fit each component.

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.

Stack

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

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:

DialogDrawer