Sheet

A container that overlays the current view from the edge of the screen. It is a lightweight way of allowing users to complete a task without losing contextual information of the view beneath it.

import {
	Sheet,
	SheetBody,
	SheetClose,
	SheetContent,
	SheetDescription,
	SheetFooter,
	SheetHeader,
	SheetTitle,
	SheetTrigger,
} from "@ngrok/mantle";

<Sheet>
	<SheetTrigger asChild>
		<Button appearance="filled">Open Sheet</Button>
	</SheetTrigger>
	<SheetContent>
		<SheetHeader>
			<SheetTitle>Are you absolutely sure?</SheetTitle>
			<SheetDescription>
				This action cannot be undone. This will permanently delete your account and remove your data from our
				servers.
			</SheetDescription>
		</SheetHeader>
		<SheetBody className="space-y-4">
			<p>
				Lorem ipsum
			</p>
		</SheetBody>
		<SheetFooter>
			<SheetClose asChild>
				<Button>Close</Button>
			</SheetClose>
		</SheetFooter>
	</SheetContent>
</Sheet>