Sheet

A sheet slides a panel in from an edge of the screen, where users read details or complete a task without leaving the page. By default, it enters from the right edge and takes the full height of the screen. While it is open, focus stays in the sheet and the page behind it doesn't scroll. Users close it with the close button, the Escape key or a press outside the sheet.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import {
	Sheet,
	SheetContent,
	SheetDescription,
	SheetHeader,
	SheetTitle,
	SheetTrigger,
} from "@biem/ui/components/ui/sheet";

export function SheetDefault() {
	return (
		<Sheet>
			<SheetTrigger render={<Button variant="outline"/>}>Delivery details</SheetTrigger>
			<SheetContent>
				<SheetHeader>
					<SheetTitle>Delivery details</SheetTitle>
					<SheetDescription>
						The warehouse delivers 12 cases on Tuesday between 6:00 and 8:00. The store checks them in at the back entrance.
					</SheetDescription>
				</SheetHeader>
			</SheetContent>
		</Sheet>
	);
}

ExamplesCopy Anchor Link

Top SideCopy Anchor Link

Content that relates to the entire page, such as the filters of a product list, can open from above. With side set to "top", the sheet slides down across the full width of the screen and takes only the height its content needs.

Bottom SideCopy Anchor Link

On a phone, the lower edge of the screen lies within reach of the thumb, which suits short tasks such as choosing a store. Set to "bottom", side lets the sheet rise from that edge, again across the full width and only as tall as its content.

Left SideCopy Anchor Link

Navigation and filters often sit at the left edge of a page, and a sheet that holds them appears where users already look for them. Through side set to "left", the sheet enters from that edge and takes the full height of the screen, as it does on the right.

With FooterCopy Anchor Link

A sheet in which users complete a task ends with the actions that conclude it. Collected in SheetFooter, these actions follow everything users need to read before they decide. An action that abandons the task works through SheetClose, so it closes the sheet without further code.

Without Close ButtonCopy Anchor Link

When the footer already offers a way to leave the task, a second close button only adds another choice. With showCloseButton set to false, the sheet leaves that button out, and users still close it through an action in the sheet, the Escape key or a press outside.

ControlledCopy Anchor Link

The application sometimes decides when the sheet closes, for example only after a delivery has been booked into stock. Through open and onOpenChange it holds the open state, so an action inside the sheet closes it once its work is done, and any other part of the interface can open it.

Disabled TriggerCopy Anchor Link

Details are not always available when users look for them, for example while a delivery still waits for its time slot. Marked as disabled, the trigger stays visible but no longer opens the sheet, so users know the details exist before they can read them.

Disabled CloseCopy Anchor Link

Closing a sheet can depend on the state of the task, for example when an action should end it only once every count has been entered. Once it carries disabled, SheetClose no longer closes the sheet, and users close it in the other ways instead.

API ReferenceCopy Anchor Link

SheetCopy Anchor Link

SheetTriggerCopy Anchor Link

SheetContentCopy Anchor Link

SheetHeaderCopy Anchor Link

SheetHeader groups the title and the description. It renders a div and has no props of its own.

SheetTitleCopy Anchor Link

SheetDescriptionCopy Anchor Link

SheetFooterCopy Anchor Link

SheetFooter stacks the actions at the end of the sheet. It renders a div and has no props of its own.

SheetCloseCopy Anchor Link