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

1export default function RootLayout({
2  children,
3}: Readonly<{
4  children: React.ReactNode;
5}>) {
6  return (
7    <html lang='en'>
8      <body className={poppins.className}>
9        <div vaul-drawer-wrapper=''>{children}</div>
10      </body>
11    </html>
12  );
13}

Props

Prop	Type	Description
open	boolean	The content to be displayed within the AuroraBackground component.
setOpen	boolean	this is an function to close and open the drawer
triggerContent	ReactNode	This will use for default click without an using state

Gallery Modal Directional Drawer