Drawer

A responsive drawer, customizable to slide from any edge of the screen.
Ideal for side menus and action panels.

Drawer Content

Here you can place your content.

Installation

npx @ayushmxxn/serenity-ui@latest add drawer

Usage

'use client'
import Drawer from './components/ui/Drawer';
import { useState } from 'react';


const Page = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button className='bg-white font-medium text-sm text-black px-4 py-2 rounded-full' onClick={() => setIsOpen(true)}>Open Drawer</button>
      <Drawer isOpen={isOpen} onOpenChange={setIsOpen} position="right">
      // Place your Content Here
        <div className='flex justify-center items-center flex-col'>
            <h2 className="text-2xl font-bold mb-4">Drawer Content</h2>
            <p>Here you can place your content.</p>
        </div>
      </Drawer>
    </div>
  );
};

export default Page;

Props

Prop Name	Type	Description
isOpen	boolean	Controls whether the drawer is open or closed.
onOpenChange	boolean	Callback function triggered when the open state changes.
position	string	The position of the drawer. Top / Bottom / Left / Right
children	React.ReactNode	The content to be displayed inside the drawer.