Stacksheet

A typed, animated sheet stack for React. Powered by Zustand and Motion.

npm install @howells/stacksheet

Peer dependencies: react >= 18, react-dom >= 18.

Quick start

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

const { StacksheetProvider, useSheet } = createStacksheet();

function UserProfile({ userId }: { userId: string }) {
  const { close } = useSheet();
  return (
    <div>
      <h2>User {userId}</h2>
      <button onClick={close}>Done</button>
    </div>
  );
}

function App() {
  return (
    <StacksheetProvider>
      <YourApp />
    </StacksheetProvider>
  );
}

Open a sheet from any component:

const { open } = useSheet();
open(UserProfile, { userId: "u_abc" });

No registration, no type map, no config. The sheet slides in from the right on desktop, bottom on mobile, with focus trapping, scroll lock, drag-to-dismiss, and keyboard navigation built in.

Documentation

Full docs, interactive playground, and API reference:

stacksheet.danielhowells.com

• Getting Started
• Configuration
• Composable Parts
• Drag to Dismiss
• Styling
• Type Registry

License

MIT