Drawer

A flexible drawer component that slides in from any direction with customizable content and behavior.

Import

import { Drawer } from '@akitectio/aki-ui'

Basic Usage

const [isOpen, setIsOpen] = useState(false)

return (
  <>
    <Button onClick={() => setIsOpen(true)}>
      Open Drawer
    </Button>
    <Drawer
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="Basic Drawer"
    >
      <p>This is the drawer content.</p>
      <p className="mt-4">You can put any content here.</p>
    </Drawer>
  </>
)

Placement

<Drawer
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  placement="left" // 'left' | 'right' | 'top' | 'bottom'
  title="Left Drawer"
>
  Content here
</Drawer>

Sizes

<Drawer
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  size="lg" // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
  title="Large Drawer"
>
  Content here
</Drawer>

With Footer

<Drawer
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Drawer with Footer"
  footer={
    <div className="flex justify-end gap-2">
      <Button variant="outline" onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button variant="primary" onClick={() => setIsOpen(false)}>
        Save
      </Button>
    </div>
  }
>
  <p>This drawer has a footer with action buttons.</p>
</Drawer>

API Reference

Props

PropTypeDefaultDescription
isOpenbooleanfalseWhether the drawer is open
onClose() => void-Called when the drawer should close
placement'left' | 'right' | 'top' | 'bottom''right'The placement of the drawer
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full''md'The size of the drawer
titleReactNode-The title of the drawer
footerReactNode-The footer content of the drawer
closeButtonbooleantrueWhether to show the close button
closeOnOverlayClickbooleantrueWhether to close when clicking outside
closeOnEscbooleantrueWhether to close when pressing escape key
lockScrollbooleantrueWhether to disable scrolling of the background
hasOverlaybooleantrueWhether to show an overlay behind the drawer
zIndexnumber1000The z-index of the drawer