Stacksheet

Typed Sheet Stacks with push, navigate, replace, and composable Sheet Parts.

Open one sheet, then keep moving.

The demo exercises open, push, navigate, replace, back, close, and mobile bottom-sheet behavior.

0 Sheets in stack

Install

npm install @patternmode/stacksheet

import { createStacksheet } from "@patternmode/stacksheet";
import "@patternmode/stacksheet/styles.css";

const { StacksheetProvider, useSheet } = createStacksheet<{
  Settings: { title: string };
}>();

function OpenSettings() {
  const { open } = useSheet();
  return (
    <button onClick={() => open("Settings", "settings", { title: "Settings" })}>
      Open
    </button>
  );
}

Core API

`createStacksheet`

Creates an isolated sheet stack instance.

config: StacksheetConfigSide, width, modal behavior, drag settings, snap points, and spring presets.
StacksheetProvider: ComponentWraps the app and renders the stack portal. Pass registered sheets and optional class overrides.
useSheet: HookReturns open, push, navigate, replace, swap, pop, and close actions.

`Sheet`

Composable Sheet Parts for custom layouts.

Header / Body / Footer: ComponentsSheet regions with scroll and drag handling.
Back / Close: ComponentsBuilt-in navigation controls for nested stacks.

Read the package README for callbacks, snap points, accessibility, and styling details.