Drawer

A sliding panel that overlays the main content, typically used for navigation, forms, or additional content. Supports multiple placements (top, right, bottom, left) with smooth animations and backdrop overlay.

Import

import { Drawer, DrawerHeader, DrawerFooter, DrawerBody } from "@sparrowengg/twigs-react";

Usage

const DrawerExample = () => {
  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);

  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={() => setIsDrawerOpen(false)}
        placement="right"
      >
        <DrawerHeader>
          <Heading size="h4">Edit Profile</Heading>
        </DrawerHeader>
        <DrawerBody>
          {/* Your content here */}
        </DrawerBody>
        <DrawerFooter>
          {/* Footer content */}
        </DrawerFooter>
      </Drawer>
      <Button onClick={() => setIsDrawerOpen(true)}>
        Open Drawer
      </Button>
    </>
  );
};

Props

You can alter the placement of the Modal by changing the prop to top ,right ,left and bottom

Prop	Type	Default
`isOpen?`	`boolean`	`false`
`onClose?`	`() => void`	-
`placement?`	`'top' \| 'left' \| 'right' \| 'bottom'`	`'right'`
`finalFocusRef?`	`React.RefObject<HTMLButtonElement>`	-
`portalContainer?`	`HTMLElement`	-
`children?`	`ReactNode`	-
`css?`	`object`	-

Drawer

Import

Usage

Props

Drawer

On this page