Slide Drawer React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SlideDrawer from "./SlideDrawer";

export default function Example() {
  return (
    <SlideDrawer
      trigger={"Open studio notes"}
      title={"Studio notes"}
      children={"Objects with intention.\n\nA collection of considered shapes, materials and interactions.\n\nEvery detail has a purpose. Every component is yours to make your own."}
      footer={"A little room for the details."}
      label={"Studio notes"}
      closeLabel={"Close panel"}
      side={"right"}
      width={420}
      color={"#d4bea6"}
      background={"#26221e"}
    />
  );
}

Using Slide Drawer

Use trigger for an optional launcher or control open from your own interface. Put content in children and persistent actions in footer.

The native modal dialog traps focus and closes on Escape or a backdrop click. When controlled, update open in onOpenChange to accept the requested state.

Props

Name	Type	Required	Default	Description
trigger	ReactNode	No	undefined	Optional button content to open the drawer.
children	ReactNode	No	undefined	Scrollable panel content.
title	ReactNode	No	undefined	Panel heading; string titles also name the dialog.
footer	ReactNode	No	undefined	Optional footer content.
open	boolean	No	undefined	Controlled open state.
defaultOpen	boolean	No	false	Initial uncontrolled open state.
onOpenChange	function	No	undefined	Receives requested open and close states.
closeLabel	string	No	"Close panel"	Close button label.
label	string	No	"Panel"	Accessible dialog name when title is not a string.
side	"right" \| "left"	No	"right"	Edge from which the panel enters.
width	number	No	420	Panel width in pixels, capped by the viewport.
color	string	No	"#d4bea6"	Accent and focus colour.
background	string	No	"#26221e"	Panel surface colour.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.