A `Card` docked to one edge of the viewport as a slide-in panel, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.
Examples of v0.4.9 are shown as code; only the latest version runs live. Open the live examples →
Basic Drawer
1const BasicDrawer = () => (2 <Drawer onClose={() => {}} title="Add Block" placement="right">3 Panel content4 </Drawer>5);67render(<BasicDrawer />);
Drawer Without Title
1const DrawerWithoutTitle = () => (2 <Drawer onClose={() => {}} placement="right">3 Panel content, no header4 </Drawer>5);67render(<DrawerWithoutTitle />);
Non Blocking Right Panel Drawer
1const NonBlockingRightPanelDrawer = () => (2 <Drawer onClose={() => {}} title="Block" placement="right" backdrop={false}>3 Non-blocking side panel content4 </Drawer>5);67render(<NonBlockingRightPanelDrawer />);
Bottom Sheet Drawer
1const BottomSheetDrawer = () => (2 <Drawer onClose={() => {}} title="Filters" placement="bottom">3 Slides up from the bottom edge4 </Drawer>5);67render(<BottomSheetDrawer />);