{"_id":"@adanyal46/ui-components","_rev":"5-50392ca8a10e33f5ac69705a7c8b9c83","name":"@adanyal46/ui-components","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@adanyal46/ui-components","version":"1.0.0","keywords":["react","components","ui","tailwind","design-system","javascript","danyaldev"],"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","_id":"@adanyal46/ui-components@1.0.0","maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"homepage":"https://adanyal46.github.io/ui-components","bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"dist":{"shasum":"b224a338743d3f4e6eda3808c57db0882ee100c9","tarball":"https://registry.npmjs.org/@adanyal46/ui-components/-/ui-components-1.0.0.tgz","fileCount":6,"integrity":"sha512-QsrRoQqxEuB0QIp41tdZ4O5aD0MOqiBrdCcNZAGGEsXP/Pz9H4R8671EzlFT+FFIX5pSbaxSNoeSz8YkWpx1hA==","signatures":[{"sig":"MEUCIQCFhsHGqfmdxxvDtPWPjRxQRzTS9sDhLrk4m9n0thcGxQIgZx3Hhuog3C6+MhWZqxSkirQfY/J2867Ag/SViRVmVfM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75796},"main":"dist/index.js","module":"dist/index.esm.js","scripts":{"sb":"storybook dev -p 6006","dev":"storybook dev -p 6006","lint":"eslint src --ext .js,.jsx","test":"jest","build":"rollup -c","lint:fix":"eslint src --ext .js,.jsx --fix","storybook":"storybook dev -p 6006","test:watch":"jest --watch","build:watch":"rollup -c -w","test:coverage":"jest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"adanyal46","actor":{"name":"adanyal46","type":"user","email":"adanyal46@gmail.com"},"email":"adanyal46@gmail.com"},"repository":{"url":"git+https://github.com/adanyal46/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"Professional React component library by DanyalDev - Built with Tailwind CSS and JavaScript","directories":{},"_nodeVersion":"22.16.0","dependencies":{"prop-types":"^15.8.1","lucide-react":"^0.294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.55.0","rollup":"^4.6.0","postcss":"^8.4.32","react-dom":"^18.2.0","storybook":"^7.6.0","@babel/core":"^7.23.0","tailwindcss":"^3.3.6","autoprefixer":"^10.4.16","@storybook/react":"^7.6.0","@babel/preset-env":"^7.23.0","@storybook/blocks":"^7.6.0","@babel/preset-react":"^7.23.0","eslint-plugin-react":"^7.33.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.6.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","eslint-plugin-storybook":"^0.6.15","@storybook/react-webpack5":"^7.6.0","@testing-library/jest-dom":"^6.1.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.0","@rollup/plugin-node-resolve":"^15.2.0","@storybook/addon-essentials":"^7.6.0","@testing-library/user-event":"^14.5.0","@storybook/addon-interactions":"^7.6.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_1.0.0_1751209103443_0.004147137528707212","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@adanyal46/ui-components","version":"1.0.1","keywords":["react","components","ui","tailwind","design-system","javascript","danyaldev"],"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","_id":"@adanyal46/ui-components@1.0.1","maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"homepage":"https://adanyal46.github.io/ui-components","bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"dist":{"shasum":"708362bd3f24726a55ffdc3dd7a8b0082bc4ce87","tarball":"https://registry.npmjs.org/@adanyal46/ui-components/-/ui-components-1.0.1.tgz","fileCount":6,"integrity":"sha512-aBw8BpGtOd+QSC/Jl43gKiuRKtRsKLpu5cqt6LF2NfHam676bgIEsZZ+RoMrNupbZLc3oZmQDkP3Ow0tk5eAZg==","signatures":[{"sig":"MEQCIFOrc1APA7LkBBbmKMhfrQnlU48Emm9a3d+74zeS1uP+AiBKCRQeZGz1vCQzT46bop/na05nzlbhhcYbscvdSJPevg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75796},"main":"dist/index.js","module":"dist/index.esm.js","scripts":{"sb":"storybook dev -p 6006","dev":"storybook dev -p 6006","lint":"eslint src --ext .js,.jsx","test":"jest","build":"rollup -c","lint:fix":"eslint src --ext .js,.jsx --fix","storybook":"storybook dev -p 6006","test:watch":"jest --watch","build:watch":"rollup -c -w","test:coverage":"jest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"adanyal46","actor":{"name":"adanyal46","type":"user","email":"adanyal46@gmail.com"},"email":"adanyal46@gmail.com"},"repository":{"url":"git+https://github.com/adanyal46/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"Professional React component library by DanyalDev - Built with Tailwind CSS and JavaScript","directories":{},"_nodeVersion":"22.16.0","dependencies":{"prop-types":"^15.8.1","lucide-react":"^0.294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.55.0","rollup":"^4.6.0","postcss":"^8.4.32","react-dom":"^18.2.0","storybook":"^7.6.0","@babel/core":"^7.23.0","tailwindcss":"^3.3.6","autoprefixer":"^10.4.16","@storybook/react":"^7.6.0","@babel/preset-env":"^7.23.0","@storybook/blocks":"^7.6.0","@babel/preset-react":"^7.23.0","eslint-plugin-react":"^7.33.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.6.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","eslint-plugin-storybook":"^0.6.15","@storybook/react-webpack5":"^7.6.0","@testing-library/jest-dom":"^6.1.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.0","@rollup/plugin-node-resolve":"^15.2.0","@storybook/addon-essentials":"^7.6.0","@testing-library/user-event":"^14.5.0","@storybook/addon-interactions":"^7.6.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_1.0.1_1751209277054_0.7388295921749284","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@adanyal46/ui-components","version":"1.1.0","keywords":["react","components","ui","tailwind","design-system","javascript","danyaldev"],"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","_id":"@adanyal46/ui-components@1.1.0","maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"homepage":"https://adanyal46.github.io/ui-components","bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"dist":{"shasum":"daca5f35deff7a8c0c8f83e6bb5dd71b8f90e6f5","tarball":"https://registry.npmjs.org/@adanyal46/ui-components/-/ui-components-1.1.0.tgz","fileCount":6,"integrity":"sha512-PKRLX6+E2qw2eax9LrG9oBDnUTEEic/R78xZzlBvT14YJm+3ZwaHzoDF/NYv4JkuUebgloA9lmplO9VFNK4LKg==","signatures":[{"sig":"MEYCIQC9zsMGR40GIkiBsVqQkUaD2cM23DrTmDnxshNiX+RMfAIhAL52n1GPgyY+23TPxcaIHWSSj0EdrpTZ8ORTxmvhk5Pl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":185028},"main":"dist/index.js","module":"dist/index.esm.js","scripts":{"sb":"storybook dev -p 6006","dev":"storybook dev -p 6006","lint":"eslint src --ext .js,.jsx","test":"jest","build":"rollup -c","lint:fix":"eslint src --ext .js,.jsx --fix","storybook":"storybook dev -p 6006","test:watch":"jest --watch","build:watch":"rollup -c -w","test:coverage":"jest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"adanyal46","actor":{"name":"adanyal46","type":"user","email":"adanyal46@gmail.com"},"email":"adanyal46@gmail.com"},"repository":{"url":"git+https://github.com/adanyal46/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"Professional React component library by DanyalDev - Built with Tailwind CSS and JavaScript","directories":{},"_nodeVersion":"22.16.0","dependencies":{"prop-types":"^15.8.1","lucide-react":"^0.294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.55.0","rollup":"^4.6.0","postcss":"^8.4.32","react-dom":"^18.2.0","storybook":"^7.6.0","@babel/core":"^7.23.0","tailwindcss":"^3.3.6","autoprefixer":"^10.4.16","@storybook/react":"^7.6.0","@babel/preset-env":"^7.23.0","@storybook/blocks":"^7.6.0","@babel/preset-react":"^7.23.0","eslint-plugin-react":"^7.33.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.6.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","eslint-plugin-storybook":"^0.6.15","@storybook/react-webpack5":"^7.6.0","@testing-library/jest-dom":"^6.1.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.0","@rollup/plugin-node-resolve":"^15.2.0","@storybook/addon-essentials":"^7.6.0","@testing-library/user-event":"^14.5.0","@storybook/addon-interactions":"^7.6.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_1.1.0_1751209993641_0.19909798292801129","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@adanyal46/ui-components","version":"1.1.1","keywords":["react","components","ui","tailwind","design-system","javascript","danyaldev"],"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","_id":"@adanyal46/ui-components@1.1.1","maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"homepage":"https://adanyal46.github.io/ui-components","bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"dist":{"shasum":"d31469bfdfcd3447113ee71ea6d036a668322bb0","tarball":"https://registry.npmjs.org/@adanyal46/ui-components/-/ui-components-1.1.1.tgz","fileCount":6,"integrity":"sha512-6o1N5RleL9hOIXVM0tYoOR4YIq+5Nbau31ea1N9XWEEecmdiX6S+wfbqhKu4MFhWHAPrP6CubdDl600jyMPYSA==","signatures":[{"sig":"MEQCIHRhYYeKMHDHK2gx6evZ97QM8lwYdVllDcKFEZ/91yHtAiAoZv1ESzcWmTcGXxI2WCkUlOgiF4aM1xfJxyLqz330ZQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":185194},"main":"dist/index.js","module":"dist/index.esm.js","scripts":{"sb":"storybook dev -p 6006","dev":"storybook dev -p 6006","lint":"eslint src --ext .js,.jsx","test":"jest","build":"rollup -c","lint:fix":"eslint src --ext .js,.jsx --fix","storybook":"storybook dev -p 6006","test:watch":"jest --watch","build:watch":"rollup -c -w","test:coverage":"jest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"adanyal46","actor":{"name":"adanyal46","type":"user","email":"adanyal46@gmail.com"},"email":"adanyal46@gmail.com"},"repository":{"url":"git+https://github.com/adanyal46/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"Professional React component library by DanyalDev - Built with Tailwind CSS and JavaScript","directories":{},"_nodeVersion":"22.16.0","dependencies":{"prop-types":"^15.8.1","lucide-react":"^0.294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.55.0","rollup":"^4.6.0","postcss":"^8.4.32","react-dom":"^18.2.0","storybook":"^7.6.0","@babel/core":"^7.23.0","tailwindcss":"^3.3.6","autoprefixer":"^10.4.16","@storybook/react":"^7.6.0","@babel/preset-env":"^7.23.0","@storybook/blocks":"^7.6.0","@babel/preset-react":"^7.23.0","eslint-plugin-react":"^7.33.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.6.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","eslint-plugin-storybook":"^0.6.15","@storybook/react-webpack5":"^7.6.0","@testing-library/jest-dom":"^6.1.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.0","@rollup/plugin-node-resolve":"^15.2.0","@storybook/addon-essentials":"^7.6.0","@testing-library/user-event":"^14.5.0","@storybook/addon-interactions":"^7.6.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_1.1.1_1751210047954_0.28952115687104496","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@adanyal46/ui-components","version":"1.1.2","description":"Comprehensive React component library featuring 11 professional components - Button, Card, Input, Grid, Table, Modal, Badge, Loading, Header, Footer, Sidebar. Built with JavaScript, Tailwind CSS, and modern design principles for building accessible, respo","main":"dist/index.js","module":"dist/index.esm.js","scripts":{"build":"rollup -c","build:watch":"rollup -c -w","dev":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint src --ext .js,.jsx","lint:fix":"eslint src --ext .js,.jsx --fix","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","sb":"storybook dev -p 6006"},"keywords":["react","components","ui","tailwind","design-system","javascript","button","modal","badge","loading","header","footer","sidebar","card","input","grid","table","responsive","accessible","modern","ui-kit","component-library","frontend","web-components"],"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/adanyal46/ui-components.git"},"bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"homepage":"https://adanyal46.github.io/ui-components","documentation":"https://adanyal46.github.io/ui-components","peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"dependencies":{"lucide-react":"^0.294.0","prop-types":"^15.8.1"},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.23.0","@babel/preset-react":"^7.23.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.2.0","@rollup/plugin-terser":"^0.4.0","@storybook/addon-essentials":"^7.6.0","@storybook/addon-interactions":"^7.6.0","@storybook/addon-links":"^7.6.0","@storybook/blocks":"^7.6.0","@storybook/react":"^7.6.0","@storybook/react-webpack5":"^7.6.0","@storybook/testing-library":"^0.2.0","@testing-library/jest-dom":"^6.1.0","@testing-library/react":"^14.1.0","@testing-library/user-event":"^14.5.0","autoprefixer":"^10.4.16","eslint":"^8.55.0","eslint-plugin-react":"^7.33.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-storybook":"^0.6.15","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.32","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.6.0","rollup-plugin-postcss":"^4.0.2","storybook":"^7.6.0","tailwindcss":"^3.3.6"},"publishConfig":{"access":"public"},"_id":"@adanyal46/ui-components@1.1.2","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Ya+ZMUrNFAlN7zgNWpFUzEjVmqAS9lRVY7VxG3WepvaNidz4BGvwLiZII3v8jptwCILxe+WUK7NBJDGGZmXMLA==","shasum":"3037a9e05d1127de64b9106d61cc51be22980fd6","tarball":"https://registry.npmjs.org/@adanyal46/ui-components/-/ui-components-1.1.2.tgz","fileCount":6,"unpackedSize":189772,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDTvzxOB07ZGPMWGunwQxTY21zwOomC/aT2WdWwqS7XPAiEAzxmA5uSIRVkrzFDMF09zyIg6KAOulmH0sk4Ly/s5iU8="}]},"_npmUser":{"name":"adanyal46","email":"adanyal46@gmail.com","actor":{"name":"adanyal46","email":"adanyal46@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_1.1.2_1751210199236_0.3733406934826138"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-29T14:58:23.324Z","modified":"2025-06-29T15:16:39.623Z","1.0.0":"2025-06-29T14:58:23.620Z","1.0.1":"2025-06-29T15:01:17.307Z","1.1.0":"2025-06-29T15:13:13.834Z","1.1.1":"2025-06-29T15:14:08.664Z","1.1.2":"2025-06-29T15:16:39.438Z"},"bugs":{"url":"https://github.com/adanyal46/ui-components/issues"},"author":{"name":"DanyalDev","email":"your.email@example.com"},"license":"MIT","homepage":"https://adanyal46.github.io/ui-components","keywords":["react","components","ui","tailwind","design-system","javascript","button","modal","badge","loading","header","footer","sidebar","card","input","grid","table","responsive","accessible","modern","ui-kit","component-library","frontend","web-components"],"repository":{"type":"git","url":"git+https://github.com/adanyal46/ui-components.git"},"description":"Comprehensive React component library featuring 11 professional components - Button, Card, Input, Grid, Table, Modal, Badge, Loading, Header, Footer, Sidebar. Built with JavaScript, Tailwind CSS, and modern design principles for building accessible, respo","maintainers":[{"name":"adanyal46","email":"adanyal46@gmail.com"}],"readme":"# @adanyal46/ui-components\n\n[![npm version](https://badge.fury.io/js/@adanyal46%2Fui-components.svg)](https://www.npmjs.com/package/@adanyal46/ui-components)\n[![npm downloads](https://img.shields.io/npm/dm/@adanyal46/ui-components.svg)](https://www.npmjs.com/package/@adanyal46/ui-components)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@adanyal46/ui-components)](https://bundlephobia.com/package/@adanyal46/ui-components)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA comprehensive React component library built with JavaScript and Tailwind CSS for building modern, accessible, and responsive user interfaces. Features 11 professional components covering everything from basic UI elements to complex layout components.\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @adanyal46/ui-components\n```\n\n### Usage\n\n```jsx\nimport { \n  Button, Card, Input, Grid, Table,\n  Modal, Badge, Loading,\n  Header, Footer, Sidebar \n} from '@adanyal46/ui-components';\n\nfunction App() {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div>\n      {/* Navigation Header */}\n      <Header \n        brand=\"My App\"\n        navItems={[\n          { label: 'Home', href: '/', active: true },\n          { label: 'Features', href: '/features' },\n          { label: 'Pricing', href: '/pricing' }\n        ]}\n        actions={\n          <div className=\"flex space-x-2\">\n            <Button variant=\"ghost\" size=\"sm\">Sign In</Button>\n            <Button variant=\"primary\" size=\"sm\">Get Started</Button>\n          </div>\n        }\n      />\n\n      {/* Main Content */}\n      <div className=\"flex\">\n        <Sidebar\n          items={[\n            { label: 'Dashboard', icon: '📊', href: '/dashboard', active: true },\n            { label: 'Users', icon: '👥', href: '/users' },\n            { label: 'Analytics', icon: '📈', href: '/analytics' },\n            { label: 'Settings', icon: '⚙️', href: '/settings' }\n          ]}\n        />\n        \n        <main className=\"flex-1 p-6\">\n          <div className=\"flex items-center justify-between mb-6\">\n            <h1>Dashboard</h1>\n            <Badge variant=\"success\">Online</Badge>\n          </div>\n\n          <Grid cols={3} gap=\"gap-6\">\n            <Card>\n              <h3>Total Users</h3>\n              <p className=\"text-2xl font-bold\">1,234</p>\n            </Card>\n            <Card>\n              <h3>Revenue</h3>\n              <p className=\"text-2xl font-bold\">$45,678</p>\n            </Card>\n            <Card>\n              <h3>Growth</h3>\n              <p className=\"text-2xl font-bold\">+12%</p>\n            </Card>\n          </Grid>\n\n          <Card className=\"mt-6\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3>User Management</h3>\n              <Button onClick={() => setIsModalOpen(true)}>\n                Add User\n              </Button>\n            </div>\n            \n            <Input \n              label=\"Search Users\"\n              placeholder=\"Type to search...\"\n              className=\"mb-4\"\n            />\n            \n            <Table\n              data={users}\n              columns={[\n                { key: 'name', title: 'Name' },\n                { key: 'email', title: 'Email' },\n                { key: 'role', title: 'Role' },\n                { key: 'status', title: 'Status' }\n              ]}\n              sortable={true}\n              striped={true}\n            />\n          </Card>\n        </main>\n      </div>\n\n      {/* Modal */}\n      <Modal \n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        title=\"Add New User\"\n        size=\"md\"\n      >\n        <form className=\"space-y-4\">\n          <Input label=\"Full Name\" placeholder=\"John Doe\" />\n          <Input label=\"Email\" type=\"email\" placeholder=\"john@example.com\" />\n          <div className=\"flex space-x-2 pt-4\">\n            <Button variant=\"outline\" onClick={() => setIsModalOpen(false)}>\n              Cancel\n            </Button>\n            <Button variant=\"primary\" type=\"submit\">\n              Create User\n            </Button>\n          </div>\n        </form>\n      </Modal>\n\n      {/* Footer */}\n      <Footer \n        brand=\"My App\"\n        links={[\n          { label: 'Privacy Policy', href: '/privacy' },\n          { label: 'Terms of Service', href: '/terms' },\n          { label: 'Support', href: '/support' },\n          { label: 'Documentation', href: '/docs' }\n        ]}\n        copyright=\"© 2024 My App. All rights reserved.\"\n      />\n    </div>\n  );\n}\n```\n\n## 🌟 Live Demo\n\n**[View Interactive Documentation & Examples →](https://adanyal46.github.io/ui-components)**\n\nTry all components live with interactive examples, code snippets, and customization options.\n\n## 📦 What's Included\n\n### Core Components\n- **Button** - Versatile button component with multiple variants and sizes\n- **Card** - Flexible container component for content grouping\n- **Input** - Form input component with validation support\n- **Modal** - Accessible modal dialog component\n- **Badge** - Status and label component\n- **Loading** - Loading states and spinners\n\n### Layout Components\n- **Header** - Navigation header component\n- **Footer** - Page footer component\n- **Sidebar** - Collapsible sidebar navigation\n- **Grid** - Responsive grid system\n- **Table** - Data table component\n\n### Form Components\n- **LoginForm** - Ready-to-use login form\n- **SignupForm** - User registration form\n\n## ✨ Key Features\n\n- 🎯 **JavaScript First** - No TypeScript complexity, pure JavaScript\n- 📱 **Responsive Design** - Mobile-first responsive components\n- ♿ **Accessibility** - WCAG 2.1 compliant components\n- 🎨 **Customizable** - Easy theming and customization\n- 📦 **Tree Shakeable** - Import only what you need\n- ⚡ **Performance Optimized** - Lightweight and fast\n- 🔧 **Developer Friendly** - Excellent DX with clear APIs\n\n## 🛠️ Technology Stack\n\n- **React 18.2+** - Modern React with hooks and concurrent features\n- **Tailwind CSS** - Utility-first CSS framework\n- **Lucide React** - Beautiful, customizable icons\n- **PropTypes** - Runtime type checking for React props\n\n## 📚 Documentation\n\n- [Getting Started](./docs/getting-started.md)\n- [Installation Guide](./docs/installation.md)\n- [Component Reference](./docs/components/README.md)\n- [Examples](./docs/examples/README.md)\n- [Customization](./docs/customization.md)\n- [Contributing](./docs/contributing.md)\n\n## 🏗️ Project Structure\n\n```\nreact-component-library/\n├── src/\n│   ├── components/          # Component library\n│   │   ├── Button/         # Button component\n│   │   ├── Card/           # Card component\n│   │   ├── Input/          # Input component\n│   │   └── index.js        # Main exports\n│   ├── styles/             # Global styles\n│   └── utils/              # Utility functions\n├── docs/                   # Documentation\n├── examples/               # Usage examples\n├── stories/               # Storybook stories\n└── tests/                 # Test files\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](./docs/contributing.md) for details on how to get started.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.\n\n## 🆘 Support\n\n- [Documentation](./docs/README.md)\n- [Examples](./docs/examples/README.md)\n- [GitHub Issues](https://github.com/your-org/react-ui-components/issues)\n\n---\n\nBuilt with ❤️ for the React community\n","readmeFilename":"README.md"}