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 } from "@ngrok/mantle/sheet";
import { ListMagnifyingGlassIcon } from "@phosphor-icons/react/ListMagnifyingGlass";
import { TerminalWindowIcon } from "@phosphor-icons/react/TerminalWindow";
import { TrashSimpleIcon } from "@phosphor-icons/react/TrashSimple";
<Sheet.Root>
<Sheet.Trigger asChild>
<Button type="button" appearance="filled">
Open Sheet
</Button>
</Sheet.Trigger>
<Sheet.Content>
<Sheet.Header>
<Sheet.TitleGroup>
<Sheet.Title>Are you absolutely sure?</Sheet.Title>
<Sheet.Actions>
<IconButton
appearance="ghost"
type="button"
icon={<TerminalWindowIcon />}
label="Start a Tunnel"
/>
<IconButton
appearance="ghost"
type="button"
icon={<ListMagnifyingGlassIcon />}
label="See Traffic"
/>
<IconButton appearance="ghost" type="button" icon={<TrashSimpleIcon />} label="Delete" />
<Separator orientation="vertical" className="h-[80%]" />
<Sheet.CloseIconButton />
</Sheet.Actions>
</Sheet.TitleGroup>
<Sheet.Description>
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</Sheet.Description>
</Sheet.Header>
<Sheet.Body className="space-y-4">
<p>Lorem ipsum</p>
</Sheet.Body>
<Sheet.Footer>
<Sheet.Close asChild>
<Button type="button">Close</Button>
</Sheet.Close>
</Sheet.Footer>
</Sheet.Content>
</Sheet.Root>;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 Sheet.Trigger.
import { Button } from "@ngrok/mantle/button";
import { Sheet } 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 (
<Sheet.Root open onOpenChange={() => navigate("..")}>
<Sheet.Content>
<Sheet.Header>
<Sheet.TitleGroup>
<Sheet.Title>A controlled Sheet</Sheet.Title>
<Sheet.Actions>
<Sheet.CloseIconButton />
</Sheet.Actions>
</Sheet.TitleGroup>
<Sheet.Description>
This sheet is controlled by a router or state manager.
</Sheet.Description>
</Sheet.Header>
<Sheet.Body>
<p>
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.
</p>
</Sheet.Body>
<Sheet.Footer>
<Sheet.Close asChild>
<Button type="button">Close</Button>
</Sheet.Close>
</Sheet.Footer>
</Sheet.Content>
</Sheet.Root>
);
}By default, a Sheet's content width is responsive with a default preferred width: the maximum width of the Sheet.Content when the window viewport is larger than the mobile breakpoint (sm). You can control the preferred width of the Sheet.Content by using the preferredWidth prop:
import { Button } from "@ngrok/mantle/button";
import { Sheet } from "@ngrok/mantle/sheet";
<Sheet.Root>
<Sheet.Trigger asChild>
<Button type="button" appearance="filled">
Open 800px wide Sheet
</Button>
</Sheet.Trigger>
{/* using the 👇 `preferredWidth` prop */}
<Sheet.Content preferredWidth="sm:max-w-[800px]">
<Sheet.Header>
<Sheet.TitleGroup>
<Sheet.Title>Tempor pariatur fugiat fugiat cupidatat velit.</Sheet.Title>
<Sheet.Actions>
<Sheet.CloseIconButton />
</Sheet.Actions>
</Sheet.TitleGroup>
</Sheet.Header>
<Sheet.Body className="space-y-4">
<p>
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.
</p>
</Sheet.Body>
<Sheet.Footer>
<Sheet.Close asChild>
<Button type="button">Close</Button>
</Sheet.Close>
<Button type="button" appearance="filled">
Save
</Button>
</Sheet.Footer>
</Sheet.Content>
</Sheet.Root>;The Sheet components are built on top of Radix Dialog.
The root component for a Sheet. Should compose the Sheet.Trigger and Sheet.Content. Acts as a stateful provider for the Sheet's open/closed state.
All props from Radix Dialog.Root.
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.
The close button for a Sheet. Should be rendered as a child of the Sheet.Content component. Usually contained within the Sheet.Footer component. Renders an unstyled button by default, but can be customized with the asChild prop.
Radix Dialog.Close props.
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 Sheet.Header, Sheet.Body, and Sheet.Footer.
All props from Radix Dialog.Content, plus:
An icon button that closes the Sheet when clicked. Should be rendered within the Sheet.Header as a child of Sheet.Actions.
Same props as Mantle IconButton.
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 Sheet.Content.
All props from div.
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 Sheet.Content.
All props from div.
The footer container for a Sheet. This is where you would typically place close and submit buttons. Should be rendered as a child of Sheet.Content.
All props from div.
The title for a Sheet. Typically rendered as a child of Sheet.TitleGroup. Defaults to an h2 element, but can be changed via the asChild prop.
All props from Radix Dialog.Title.
A group container for the title and actions of a Sheet. Typically rendered as a child of Sheet.Header.
All props from div.
A description for a Sheet. Typically rendered as a child of Sheet.Header.
All props from Radix Dialog.Description.
A group container for the actions of a Sheet. Typically rendered as a child of Sheet.TitleGroup.
All props from div.