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 { Button, IconButton } from "@ngrok/mantle/button";
import { Separator } from "@ngrok/mantle/separator";
import {
	Sheet,
	SheetActions,
	SheetBody,
	SheetClose,
	SheetCloseIconButton,
	SheetContent,
	SheetDescription,
	SheetFooter,
	SheetHeader,
	SheetTitle,
	SheetTitleGroup,
	SheetTrigger,
} from "@ngrok/mantle/sheet";
import { ListMagnifyingGlass } from "@phosphor-icons/react/ListMagnifyingGlass";
import { TerminalWindow } from "@phosphor-icons/react/TerminalWindow";
import { TrashSimple } from "@phosphor-icons/react/TrashSimple";


	
		
	
	
		
			
				Are you absolutely sure?
				
					} label="Start a Tunnel" />
					} label="See Traffic" />
					} label="Delete" />
					
					
				
			
			
				This action cannot be undone. This will permanently delete your account and remove your data from our
				servers.
			
		
		
			
				Lorem ipsum

Examples

Router or state management controlled Sheet

You can control when to render a Sheet with a router or via outside state management. This will allow you to open and close the Sheet programmatically without using a SheetTrigger.

import { Button } from "@ngrok/mantle/button";
import {
	Sheet,
	SheetActions,
	SheetBody,
	SheetClose,
	SheetCloseIconButton,
	SheetContent,
	SheetDescription,
	SheetFooter,
	SheetHeader,
	SheetTitle,
	SheetTitleGroup,
	SheetTrigger,
} from "@ngrok/mantle/sheet";
import { useNavigate } from "react-router";

// this is a react-router route module component export
export default function Component() {
	const navigate = useNavigate();

	return (
		 navigate("..")}>
			
				
					
						A controlled Sheet
						
							
						
					
					
						This sheet is controlled by a router or state manager.
					
				
				
					
						Consequat do voluptate culpa fugiat consequat nostrud duis
						aliqua minim. Tempor voluptate cillum elit velit. Voluptate
						aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
						proident amet.
					
				
				
					
						
							
						
					
				
			
		
	);
}

API Reference

The Sheet components are built on top of Radix Dialog.

Sheet

The root component for a Sheet. Should compose the SheetTrigger and SheetContent. Acts as a stateful provider for the Sheet's open/closed state.

All props from Radix Dialog.Root.

SheetTrigger

The button trigger for a Sheet. Should be rendered as a child of the Sheet component. Renders an unstyled button by default, but can be customized with the asChild prop.

All props from Radix Dialog.Trigger.

SheetClose

The close button for a Sheet. Should be rendered as a child of the SheetContent component. Usually contained within the SheetFooter component. Renders an unstyled button by default, but can be customized with the asChild prop.

Radix Dialog.Close props.

SheetContent

The main container for a Sheet. Should be rendered as a child of the Sheet component. Renders on top of the overlay backdrop. Should contain the SheetHeader, SheetBody, and SheetFooter.

All props from Radix Dialog.Content, plus:

Prop	Type	Default	Description
side	top bottom left right	right	The side of the screen from which the sheet will animate in from.

SheetCloseIconButton

An icon button that closes the Sheet when clicked. Should be rendered within the SheetHeader as a child of SheetActions.

Same props as the Mantle IconButton.

SheetBody

The body container for a Sheet. This is where you would typically place the main content of the sheet, such as forms or text. Should be rendered as a child of SheetContent.

All props from div.

SheetHeader

The header container for a Sheet. This is where you would typically place the title, description, and actions. Should be rendered as a child of SheetContent.

All props from div.

SheetFooter

The footer container for a Sheet. This is where you would typically place close and submit buttons. Should be rendered as a child ofSheetContent.

All props from div.

SheetTitle

The title for a Sheet. Typically rendered as a child of SheetTitleGroup. Defaults to an h2 element, but can be changed via the asChild prop.

All props from Radix Dialog.Title.

SheetTitleGroup

A group container for the title and actions of a Sheet. Typically rendered as a child of SheetHeader.

All props from div.

SheetDescription

A description for a Sheet. Typically rendered as a child of SheetHeader.

All props from Radix Dialog.Description.

SheetActions

A group container for the actions of a Sheet. Typically rendered as a child of SheetTitleGroup.

All props from div.