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
| 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 |