tiny-drawer gives you a production-ready drawer for vanilla JavaScript and TypeScript. tiny-drawer-react layers on a Next.js-friendly component API with props, refs, hooks, outside-click close, scroll-to-full behavior, and the same underlying runtime.
import { TinyDrawer } from "tiny-drawer";
import "tiny-drawer/dist/tiny-drawer.css";
const drawer = new TinyDrawer("#app", {
position: "right",
size: "360px",
minSize: "280px",
maxSize: "90vw",
draggable: true,
appendToBody: true,
themePrefix: "acme",
content: "<div>Workspace drawer content</div>",
});
document.querySelector("#openDrawer")?.addEventListener("click", () => {
drawer.open();
});The core package stays framework-agnostic, while the React package wraps it in a client-safe component model.
Start with the vanilla package, or drop in the React wrapper when you want a component API.
Open a top, right, bottom, or left drawer inside a container or directly on the document body.
Use methods, callbacks, custom events, refs, or hooks depending on how your app is built.
Placement, drag resizing, outside-click close, scroll-to-full behavior, CSS builds, SSR-safe imports, and React integration are all documented from the current npm packages.
Attach drawers to the top, right, bottom, or left with consistent behavior and sizing controls.
Pointer-driven resizing uses requestAnimationFrame and clamps sizes between your min and max values.
Use the body-mounted default, or target a specific parent container when the drawer should stay inside a custom layout region.
Use controlled or uncontrolled state, imperative refs, or the useTinyDrawer hook in React 18 and 19.
Both packages avoid touching the DOM during render, so Next.js and other SSR apps stay hydration-safe.
The core package ships ESM, CJS, UMD, CSS, minified CSS, and bundled TypeScript declarations.
Enable onScrollFull with a custom scroll target and fullscreen gap when a drawer should expand as content scrolls.
Listen to lifecycle hooks, drag callbacks, or custom events like tiny-drawer:open and tiny-drawer:drag-end.
Keep the base package framework-agnostic, then opt into the adapter only when your runtime needs it.
Install tiny-drawer for vanilla JavaScript or TypeScript. Install tiny-drawer-react for React 18/19 and Next.js. The React package already includes the core drawer runtime.