Getting Started

Motion Drawer is a headless drawer with smooth animations and easily integrates with any headless libraries such as Headless UI , React Aria , Radix UI , and more.

You must install Motion library v12.23.24 or newer into your project as Motion Drawer uses Motion under the hood.

Installation

Simply pnpm/npm/yarn install the package.

pnpm i motion-drawer

Simple Usage

import { Drawer, DrawerHeader, DrawerBody, DrawerActions } from "motion-drawer";
 
export function MyDrawer() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Drawer</button>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerHeader>Header</DrawerHeader>
        <DrawerBody>Main content goes here...</DrawerBody>
        <DrawerActions>Actions</DrawerActions>
      </Drawer>
    </>
  );
}