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

In the terminal, run the following command to begin:
npx hq-kit add sheet

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:

ModalPopover