v0.1.0 — Now Available
Slide in from any edge
Everything you need, nothing you don't
Built for production, tuned for developer experience.
All 4 Edges
Panels from top, bottom, left, or right. Just pass the `edge` prop and you're done.
Dual API
Controlled via `open` prop or imperative via `ref.current.open()` — pick what fits your code.
Zero Dependencies
~4 kB gzipped. No lodash, no framer-motion, no emotion. Just React and your styles.
TypeScript First
Full types for props, refs, and side variants. Autocomplete and safety included.
~9KB
Bundle size (minified)
0
Runtime dependencies
React 17+
Peer compatibility
SSR Safe
Next.js & Remix ready
Simple, flexible API
Imperative refs or controlled state — whichever you prefer.
import { useRef } from 'react';
import { Sheet, SheetRef } from 'react-edge-sheet';
export function BottomSheetExample() {
const ref = useRef<SheetRef>(null);
return (
<>
<button onClick={() => ref.current?.open()}>
Open Bottom Sheet
</button>
<Sheet ref={ref} edge="bottom">
<div style={{ padding: '2rem' }}>
<h2>Bottom Sheet</h2>
<p>Slides up from the bottom.</p>
<button onClick={() => ref.current?.close()}>
Close
</button>
</div>
</Sheet>
</>
);
}import { useRef } from 'react';
import { Sheet, SheetRef } from 'react-edge-sheet';
export function BottomSheetExample() {
const ref = useRef<SheetRef>(null);
return (
<>
<button onClick={() => ref.current?.open()}>
Open Bottom Sheet
</button>
<Sheet ref={ref} edge="bottom">
<div style={{ padding: '2rem' }}>
<h2>Bottom Sheet</h2>
<p>Slides up from the bottom.</p>
<button onClick={() => ref.current?.close()}>
Close
</button>
</div>
</Sheet>
</>
);
}Ready to add edge sheets?
Install in seconds, customise with your own styles.
$
npm install react-edge-sheet