Installation

Install

npm install @howells/stacksheet

Styles

Import Stacksheet's bundled stylesheet once in your app entry (for example, app.tsx, layout.tsx, or main.tsx):

import "@howells/stacksheet/styles.css";

Peer dependencies

Stacksheet requires React 18 or 19:

npm install react react-dom

Bundle

Stacksheet ships as ESM with tree-shakeable exports. The core bundle includes:

• Zustand — state management
• Motion — spring animations
• focus-trap-react — focus management
• react-remove-scroll — scroll lock
• @radix-ui/react-scroll-area — scrollable content area (composable mode)
• @radix-ui/react-slot — asChild prop support
• @radix-ui/react-portal — portal rendering

All dependencies are included in the package — no additional installs needed beyond the peer deps.

TypeScript

Stacksheet is written in TypeScript and ships declaration files. Component props are fully inferred:

import { createStacksheet } from "@howells/stacksheet";

const { useSheet } = createStacksheet();

function UserProfile({ userId }: { userId: string }) {
  return <div>{userId}</div>;
}

const { open } = useSheet();

// TypeScript infers { userId: string } from the component
open(UserProfile, { userId: "abc" });