{"_id":"@alnthea/react-tailwind-modal","_rev":"6-44d54531f230ba2371c6ae5fd74f7dc8","name":"@alnthea/react-tailwind-modal","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@alnthea/react-tailwind-modal","version":"1.0.0","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"author":{"name":"AlnThea"},"license":"MIT","_id":"@alnthea/react-tailwind-modal@1.0.0","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"dist":{"shasum":"f083820179a65d89200d39ac894701329a183cd9","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.0.tgz","fileCount":5,"integrity":"sha512-eoy2A4R7pcgIofZgRvVb2MFi8sh6NqqIfqGOkw7GBFkc4NblV/Zte9kv1cfyEbQ+h322dUNgIZgOZOBiMPkTpw==","signatures":[{"sig":"MEQCIEfSyfROwex6RhILyF+53yzcirvrgHEmX5gR5bv6EZzbAiAFH/SW+Wa7e66ro4VF9tN4gYluuPq0WRgonMNwOTr1sg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23733},"main":"./dist/react-tailwind-modal.umd.cjs","type":"module","module":"./dist/react-tailwind-modal.js","gitHead":"5eaca62f1af7bc6dee03c07dcb7f8e47d88e8079","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"_npmVersion":"9.2.0","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@lit/react":"^1.0.8","tailwindcss":"^4.1.12","@tailwindcss/vite":"^4.1.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","eslint":"^9.33.0","globals":"^16.3.0","@eslint/js":"^9.33.0","typescript":"~5.8.3","@types/node":"^24.3.0","@types/react":"^19.1.10","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.1","@tailwindcss/postcss":"^4.1.12","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/react-tailwind-modal_1.0.0_1756376073804_0.6906651527357421","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alnthea/react-tailwind-modal","version":"1.0.1","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"author":{"name":"AlnThea"},"license":"MIT","_id":"@alnthea/react-tailwind-modal@1.0.1","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"dist":{"shasum":"df8be251e3e0da2820da2a600780e9b8e40300d5","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.1.tgz","fileCount":5,"integrity":"sha512-H04l0jJuFgWnNqmQD9F1t4vaZwsNqD1POACtZGW0+2WOPJ01FB8V/vsEfcfJoD8T2wqOp8x21IR4xd4ho1/fyw==","signatures":[{"sig":"MEQCIFLZrV8wzvnRIYCWR2wN9lkAZaQaf8GimMlzKvbcgSmoAiA3MvyMeHhNA7ieNaCbN+alkzT1uJzY9lo/ELzKLxmW5g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23901},"main":"./dist/react-tailwind-modal.umd.cjs","type":"module","module":"./dist/react-tailwind-modal.js","gitHead":"6cf95330bc6de5b1b6dab1438ef2cd04d370ca40","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"_npmVersion":"9.2.0","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@lit/react":"^1.0.8","tailwindcss":"^4.1.12","@tailwindcss/vite":"^4.1.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","eslint":"^9.33.0","globals":"^16.3.0","@eslint/js":"^9.33.0","typescript":"~5.8.3","@types/node":"^24.3.0","@types/react":"^19.1.10","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.1","@tailwindcss/postcss":"^4.1.12","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/react-tailwind-modal_1.0.1_1756376853267_0.7737183284869731","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alnthea/react-tailwind-modal","version":"1.0.2","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"author":{"name":"AlnThea"},"license":"MIT","_id":"@alnthea/react-tailwind-modal@1.0.2","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"dist":{"shasum":"6aff3de801cd9a72f64d9e064454e6632fac7909","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.2.tgz","fileCount":5,"integrity":"sha512-pnO9cImTZZ5A7Pd4KsJFkq/afV5eBCvHr1fTk2BX39qd66URG/MATQ32291nxJuJRDF8VtzCX4eFKtdbrNnO3g==","signatures":[{"sig":"MEYCIQDVhR/tm9Y21jVb/P2XfLs9NFA7cizj3SSLP7ZmBGER8QIhANPmb/xzaEZWqsi9rdUVhYFtlkKo2oAu1xkIt4tB+Ar6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24392},"main":"./dist/react-tailwind-modal.umd.cjs","type":"module","module":"./dist/react-tailwind-modal.js","gitHead":"d6b676ea99c2301672ec12dc8a0a352af8aa1410","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"_npmVersion":"9.2.0","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@lit/react":"^1.0.8","tailwindcss":"^4.1.12","@tailwindcss/vite":"^4.1.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","eslint":"^9.33.0","globals":"^16.3.0","@eslint/js":"^9.33.0","typescript":"~5.8.3","@types/node":"^24.3.0","@types/react":"^19.1.10","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.1","@tailwindcss/postcss":"^4.1.12","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/react-tailwind-modal_1.0.2_1756377327904_0.6459231024188494","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alnthea/react-tailwind-modal","version":"1.0.3","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"author":{"name":"AlnThea"},"license":"MIT","_id":"@alnthea/react-tailwind-modal@1.0.3","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"dist":{"shasum":"2f9878bcd4dfd0f8d27fd84d3972d1595305303e","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.3.tgz","fileCount":6,"integrity":"sha512-Nu0L+Gu7mipvP0geMaR4btg8cKz1abG4V0an/Ree2ssr6M8HuuxLQKZSE7KrpBJtUB9+HpXxCLVB7CRLmEyulQ==","signatures":[{"sig":"MEUCIAVG9+H5cdRVPoWhUFbxKSCkwYbz0DIAwPOK5ezlXTjzAiEA34FWI1i7gosVohBejNzyT38p9KokgmcKiT6MhlotyxM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61167},"main":"./dist/react-tailwind-modal.umd.cjs","type":"module","module":"./dist/react-tailwind-modal.js","gitHead":"9e3c60e2b3a03a6be9c71d30e127ce0de4736914","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"_npmVersion":"9.2.0","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@lit/react":"^1.0.8","tailwindcss":"^4.1.12","@tailwindcss/vite":"^4.1.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","eslint":"^9.33.0","globals":"^16.3.0","@eslint/js":"^9.33.0","typescript":"~5.8.3","@types/node":"^24.3.0","@types/react":"^19.1.10","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.1","@tailwindcss/postcss":"^4.1.12","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^18.1.0","react-dom":"^18.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tailwind-modal_1.0.3_1756436720056_0.15124381467331616","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@alnthea/react-tailwind-modal","version":"1.0.4","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"author":{"name":"AlnThea"},"license":"MIT","_id":"@alnthea/react-tailwind-modal@1.0.4","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"dist":{"shasum":"65f86e086a14570ff5fca44c7130dc9e6ac6612a","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.4.tgz","fileCount":7,"integrity":"sha512-iPPh7k19bDcBj9qZ2ejsF0ykTHs18DvlkduI2y9WXjGTFCfVYta6S9txpn4Un1XYJEiA0uyx3xlS4aFvgyWw2w==","signatures":[{"sig":"MEYCIQCeIanc15uU4YzY71CpNS8o6pNjb3nEfatI9Zj0pF6gDwIhAPz/y5xYZ5zs2RfBNp2/1HACP/KprcffO5aKT5qA8kqy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65545},"main":"./dist/react-tailwind-modal.umd.cjs","type":"module","types":"./dist/react-tailwind-modal.d.ts","module":"./dist/react-tailwind-modal.js","gitHead":"ff7d8c4c7fae4027a8b672917172ebe5b59c6299","scripts":{"dev":"vite","lint":"eslint .","build":"vite build && tsc --project tsconfig.lib.json","preview":"vite preview"},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"_npmVersion":"10.8.2","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","directories":{},"_nodeVersion":"20.19.0","dependencies":{"@lit/react":"^1.0.8"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","eslint":"^9.33.0","globals":"^16.3.0","@eslint/js":"^9.33.0","typescript":"~5.8.3","@types/node":"^24.3.0","tailwindcss":"^4.1.12","@types/react":"^19.1.10","autoprefixer":"^10.4.21","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.1.7","@tailwindcss/vite":"^4.1.12","typescript-eslint":"^8.39.1","@tailwindcss/postcss":"^4.1.12","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^18.1.0","react-dom":"^18.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tailwind-modal_1.0.4_1756468182762_0.2419170139553266","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@alnthea/react-tailwind-modal","version":"1.0.5","description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","license":"MIT","author":{"name":"AlnThea"},"main":"./dist/react-tailwind-modal.umd.cjs","module":"./dist/react-tailwind-modal.js","types":"./dist/react-tailwind-modal.d.ts","type":"module","scripts":{"dev":"vite","build":"vite build && tsc --project tsconfig.lib.json && npm run fix-dts","fix-dts":"mv dist/Modal.d.ts dist/react-tailwind-modal.d.ts || move dist\\Modal.d.ts dist\\react-tailwind-modal.d.ts","lint":"eslint .","preview":"vite preview"},"keywords":["react","modal","tailwind","tailwindcss","component","animated"],"dependencies":{"@lit/react":"^1.0.8"},"devDependencies":{"@eslint/js":"^9.33.0","@tailwindcss/postcss":"^4.1.12","@tailwindcss/vite":"^4.1.12","@types/node":"^24.3.0","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react":"^5.0.0","autoprefixer":"^10.4.21","eslint":"^9.33.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","tailwindcss":"^4.1.12","typescript":"~5.8.3","typescript-eslint":"^8.39.1","vite":"^7.1.2","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":"^18.1.0","react-dom":"^18.1.0"},"gitHead":"20dbe9dc0e47675967f8bb757a3f6a05f1518960","_id":"@alnthea/react-tailwind-modal@1.0.5","_nodeVersion":"20.18.1","_npmVersion":"9.2.0","dist":{"integrity":"sha512-+P9sBBkyUMoFwyOsMfIgMuqNsnexuUs2NQreYPDOskqaOr3SHMBlwnGl6bh5n7uxGLT+eFb3oUxqYgkHgiPxLg==","shasum":"58dda90a9f3da395e6bc5d52704ed97ec8def322","tarball":"https://registry.npmjs.org/@alnthea/react-tailwind-modal/-/react-tailwind-modal-1.0.5.tgz","fileCount":11,"unpackedSize":166416,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDbzRDFomdl49eySCRE3eTWyC5OMGyi7cn5Hkqh9sAiuwIgWlMWlRjLFXCzwOqNG7HQzuMeUK3gkGS35RcbUPKW0GI="}]},"_npmUser":{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"},"directories":{},"maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-tailwind-modal_1.0.5_1756469453613_0.48630013423428675"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-28T10:14:33.733Z","modified":"2025-08-29T12:10:54.328Z","1.0.0":"2025-08-28T10:14:34.118Z","1.0.1":"2025-08-28T10:27:33.471Z","1.0.2":"2025-08-28T10:35:28.086Z","1.0.3":"2025-08-29T03:05:20.264Z","1.0.4":"2025-08-29T11:49:42.937Z","1.0.5":"2025-08-29T12:10:53.835Z"},"author":{"name":"AlnThea"},"license":"MIT","keywords":["react","modal","tailwind","tailwindcss","component","animated"],"description":"A fully animated and customizable modal component for React using Tailwind CSS v4.","maintainers":[{"name":"alnthea","email":"dahlan.fauzi1991@gmail.com"}],"readme":"# React Tailwind Modal\n\nA lightweight, customizable, and fully animated React modal component built with Tailwind CSS. This component is designed to provide a smooth and intuitive user experience with fluid transitions.\nCurrently, two official plugins are available:\n\n<div align=\"center\">\n  <table width=\"100%\" border=\"0\" cellPadding=\"5\" cellSpacing=\"0\">\n    <tr>\n      <td align=\"center\" width=\"20%\">\n        <img src=\"https://github.com/AlnThea/react-tailwind-modal/blob/master/public/box.png\" width=\"400\" alt=\"React Tailwind Modal Demo\" />\n        <p><small><strong>Box Modal</strong></small></p>\n      </td>\n      <td align=\"center\" width=\"20%\">\n        <img src=\"https://github.com/AlnThea/react-tailwind-modal/blob/master/public/left.png\" width=\"400\" alt=\"React Tailwind Modal Demo\" />\n        <p><small><strong>Sidebar Left</strong></small></p>\n      </td>\n      <td align=\"center\" width=\"20%\">\n        <img src=\"https://github.com/AlnThea/react-tailwind-modal/blob/master/public/right.png\" width=\"400\" alt=\"React Tailwind Modal Demo\" />\n        <p><small><strong>Sidebar Right</strong></small></p>\n      </td>\n      <td align=\"center\" width=\"20%\">\n        <img src=\"https://github.com/AlnThea/react-tailwind-modal/blob/master/public/top.png\" width=\"400\" alt=\"React Tailwind Modal Demo\" />\n        <p><small><strong>Sidebar Top</strong></small></p>\n      </td>\n      <td align=\"center\" width=\"20%\">\n        <img src=\"https://github.com/AlnThea/react-tailwind-modal/blob/master/public/bottom.png\" width=\"400\" alt=\"React Tailwind Modal Demo\" />\n        <p><small><strong>Sidebar Bottom</strong></small></p>\n      </td>\n    </tr>\n  </table>\n</div>\n\n### Key Features\n\n- Smooth Animations: Enjoy seamless fade-in and scale-in animations on open, and fade-out and scale-out animations on close.\n- Multiple Modal Types: Support for various modal positions, including a standard box modal, and sidebars from the left, right, top, and bottom.\n- Full Customization: Easily control the modal's maximum width (maxWidth), handle closing behavior, and add custom classes.\n- Lightweight: Contains only the necessary logic, keeping the bundle size small.\n- Tailwind CSS v4 Ready: Designed to work flawlessly with the latest Tailwind CSS ecosystem.\n\n### Require\n```bash\n   React v18 and up from v.1.0.3 \n```\n\n\n### Installation\nInstall the component using npm or yarn.\n```bash\n  npm install react-tailwind-modal\n  # or\n  yarn add react-tailwind-modal\n```\n\n### How to Use\n\n\nUse the ```useState ``` hook to control the modal's visibility. You can specify the desired ```modal type ``` using the type prop.\n```tsx\n// App.tsx\nimport { useState } from 'react';\nimport Modal from '@alnthea/react-tailwind-modal';\n\nfunction App() {\n    const [isModalOpen, setIsModalOpen] = useState(false);\n    const [isSidebarRightOpen, setIsSidebarRightOpen] = useState(false);\n    const [isSidebarBottomOpen, setIsSidebarBottomOpen] = useState(false);\n\n    const closeModal = () => {\n        setIsModalOpen(false);\n        setIsSidebarRightOpen(false);\n        setIsSidebarBottomOpen(false);\n    };\n\n    return (\n        <div className=\"flex flex-col items-center justify-center min-h-screen bg-slate-200\">\n            <h1 className=\"text-3xl font-bold mb-6\">Modal Usage Example</h1>\n            <div className=\"flex space-x-4\">\n                <button\n                    onClick={() => setIsModalOpen(true)}\n                    className=\"px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none\"\n                >\n                    Open Box Modal\n                </button>\n                <button\n                    onClick={() => setIsSidebarRightOpen(true)}\n                    className=\"px-6 py-3 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none\"\n                >\n                    Open Right Sidebar\n                </button>\n                <button\n                    onClick={() => setIsSidebarBottomOpen(true)}\n                    className=\"px-6 py-3 bg-purple-500 text-white rounded-md hover:bg-purple-600 focus:outline-none\"\n                >\n                    Open Bottom Sidebar\n                </button>\n            </div>\n\n            {/* Box Modal */}\n            <Modal isOpen={isModalOpen} onClose={closeModal} maxWidth=\"3xl\">\n                <div className=\"p-4 bg-white rounded-xl shadow-lg\">\n                    <h2 className=\"text-2xl font-bold\">Box Modal</h2>\n                    <p className=\"mt-2 text-gray-600\">\n                        This is a standard box modal.\n                    </p>\n                    <button\n                        onClick={closeModal}\n                        className=\"mt-4 px-4 py-2 bg-gray-300 rounded hover:bg-gray-400\"\n                    >\n                        Close\n                    </button>\n                </div>\n            </Modal>\n\n            {/* Right Sidebar */}\n            <Modal isOpen={isSidebarRightOpen} onClose={closeModal} type=\"sidebar-right\">\n                <div className=\"p-6\">\n                    <h2 className=\"text-2xl font-bold mb-4\">Right Sidebar</h2>\n                    <p className=\"text-gray-600\">Your sidebar content goes here.</p>\n                </div>\n            </Modal>\n\n            {/* Bottom Sidebar */}\n            <Modal isOpen={isSidebarBottomOpen} onClose={closeModal} type=\"sidebar-bottom\">\n                <div className=\"p-6\">\n                    <h2 className=\"text-2xl font-bold mb-4\">Bottom Sidebar</h2>\n                    <p className=\"text-gray-600\">Your sidebar content goes here.</p>\n                </div>\n            </Modal>\n        </div>\n    );\n}\n\nexport default App;\n```\n### Props\n\nUse the `useState` hook to control the modal's visibility.\n\n| Property              | Type                                                                              | Default        | Description                                                     |\n|:----------------------|:----------------------------------------------------------------------------------|:---------------|:----------------------------------------------------------------|\n| `children`            | `ReactNode`                                                                       | `undefined`    | The content to be displayed inside the modal.                   |\n| `isOpen`              | `boolean`                                                                         | `false`        | Controls the visibility of the modal.                           |\n| `onClose`             | `() => void`                                                                      | **(Required)** | A function called when the modal should be closed.              |\n| `disableClickOutside` | `boolean`                                                                         | `false`        | If true, the modal will not close when clicking on the overlay. |\n| `maxWidth`            | `'sm' \\| 'md' \\| 'lg' \\|'xl' \\|'2xl' \\|'3xl' \\|'4xl' \\|'5xl' \\|'6xl' \\|'7xl' \\|`  | `'xl'`         | Sets the maximum width of the modal.                            |\n| `type/ModalType`      | `'box' \\| 'sidebar-left' \\| 'sidebar-right' \\| 'sidebar-top' \\| 'sidebar-bottom'` | `'box'`        | Determines the type of modal and its animation.                 |\n| `className`           | `string`                                                                          | `''`           | Additional custom classes to be added to the modal container.   |\n\n\n### Tailwinds CSS v4 Safelist\n\nAdd safelist for tailwind css v4.1 and up  in your ```app.css``` without this, the modal won't work.\n```\n  @import \"tailwindcss\";\n  @source inline(\"{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}\");\n```\n\n### Local Development\n\nInstall the component using npm or yarn.\n```bash\n  # Clone the repository\n  git clone https://github.com/AlnThea/react-tailwind-modal.git\n    \n  # Navigate to the project directory\n  cd react-tailwind-modal\n    \n  # Install dependencies\n  npm install\n    \n  # Run the development server\n  npm run dev\n```\n\n### License\n\n```\n  This project is licensed under the MIT License.\n```","readmeFilename":"README.md"}