Responsive Modal

A responsive Modal component built with Vaul and Framer Motion. Opens like an app drawer on mobile devices and functions as a dialog or sliding panel on desktop.

Installation

npx uilayouts@latest add responsive-modal

Please add this property in your layout.tsx or app.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body className={poppins.className}>
        <div vaul-drawer-wrapper=''>{children}</div>
      </body>
    </html>
  );
}

Props

PropTypeDescription
openbooleanThe content to be displayed within the AuroraBackground component.
setOpenbooleanthis is an function to close and open the drawer
triggerContentReactNodeThis will use for default click without an using state
Gallery ModalDirectional Drawer