Side sheets are supplementary surfaces anchored to the edge of the screen, showing content complementary to the primary content.
SideSheet is a content template only — a headline row with a
close button, followed by your children. It does not render
a backdrop, does not position itself (no fixed/absolute CSS), and does not animate
open/close on its own — unlike Dialogue and BottomSheet, which both own their overlay and transitions.
This means you're responsible for placing it: mount it inside your own positioned
container — a fixed-position <aside>, or the right
pane of a SplitPane/SupportingPane — and for any enter/exit transition, if you want one.
import { SideSheet } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
SideSheet placed inside a fixed-position host, the pattern you'd use in a real layout.
Provide your own positioning wrapper — here, a fixed panel pinned to the right edge:
<script lang="ts">
import { SideSheet, Body } from '@noxlovette/material';
let open = $state(false);
</script>
<button onclick={() => (open = true)}>Show details</button>
{#if open}
<div class="fixed top-0 right-0 h-full w-80 bg-md-sys-color-surface-container-low shadow-elevation-1">
<SideSheet headline="Details" close={() => (open = false)}>
<Body class="px-6 pb-6">Supplementary content goes here.</Body>
</SideSheet>
</div>
{/if} | Prop | Type | Default | Description |
|---|---|---|---|
headline required | string | — | The title displayed at the top of the side sheet, next to the close button. |
children required | Snippet | — | The sheet's body content, rendered below the headline row. |
close required | () => void | — | Called when the close (×) button is clicked. The consumer is responsible for hiding the sheet in response. |
Explicit close control
The header always renders a labelled close ButtonIcon rather than relying on an outside click or Escape, since SideSheet has no backdrop of its own to attach that behavior to.
Positioning is on you
Because SideSheet doesn't manage focus trapping, portaling, or a backdrop itself, consumers building a modal-style side sheet need to add those behaviors (e.g. wrap it with Dialogue's Dialog.Root primitives, or bits-ui's Dialog directly) rather than getting them for free.