{"_id":"@ayush2310/tailwind-ui-components","name":"@ayush2310/tailwind-ui-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ayush2310/tailwind-ui-components","version":"0.1.0","description":"A modern UI component library built with React and Tailwind CSS","main":"dist/index.js","module":"dist/index.esm.js","scripts":{"build":"rollup -c && node build-css.js","build:js":"rollup -c","build:css":"node build-css.js","dev":"rollup -c -w","test":"echo \"Error: no test specified\" && exit 1","prepublishOnly":"npm run build"},"keywords":["ui","components","tailwind","react"],"author":{"name":"Ayush Patel"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ayush2310/tailwind-ui-components.git"},"bugs":{"url":"https://github.com/ayush2310/tailwind-ui-components/issues"},"homepage":"https://github.com/ayush2310/tailwind-ui-components#readme","peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@babel/core":"^7.18.0","@babel/preset-env":"^7.18.0","@babel/preset-react":"^7.17.12","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","autoprefixer":"^10.4.7","cssnano":"^7.0.6","postcss":"^8.4.14","react":"^18.1.0","react-dom":"^18.1.0","rollup":"^2.75.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tailwindcss":"^3.0.24"},"_id":"@ayush2310/tailwind-ui-components@0.1.0","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-9GcDvhrY5/TUCDu5GyLVBoFHY8//6oYNX1tPb4mqP8RBqlgE2vq9cqisriyfzl55tNrnZwxMVRg+sKn7LfeLKw==","shasum":"8168e4a729439dbfefaaf367c23694c7a0bc3695","tarball":"https://registry.npmjs.org/@ayush2310/tailwind-ui-components/-/tailwind-ui-components-0.1.0.tgz","fileCount":8,"unpackedSize":95673,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICz8lOH7mYxOSU1ZR9QTrDMvh0uA6rckZXHpk0QbMyCBAiA7BcWkX14J1iynG+LPglsWzAp8DVBw66n2GFHYfBGYiw=="}]},"_npmUser":{"name":"ayush2310","email":"ayushpatel232002@gmail.com"},"directories":{},"maintainers":[{"name":"ayush2310","email":"ayushpatel232002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-ui-components_0.1.0_1744788618685_0.41860612224615945"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-16T07:30:18.570Z","0.1.0":"2025-04-16T07:30:18.868Z","modified":"2025-04-16T07:30:19.143Z"},"maintainers":[{"name":"ayush2310","email":"ayushpatel232002@gmail.com"}],"description":"A modern UI component library built with React and Tailwind CSS","homepage":"https://github.com/ayush2310/tailwind-ui-components#readme","keywords":["ui","components","tailwind","react"],"repository":{"type":"git","url":"git+https://github.com/ayush2310/tailwind-ui-components.git"},"author":{"name":"Ayush Patel"},"bugs":{"url":"https://github.com/ayush2310/tailwind-ui-components/issues"},"license":"MIT","readme":"# Tailwind UI Components\n\nA modern UI component library built with React and Tailwind CSS.\n\n## Features\n\n- 🎨 Beautiful, customizable components\n- 🧩 Modular and composable\n- 📱 Fully responsive\n- 🔍 Accessible by default\n- 🛠️ Easy to customize with Tailwind CSS\n- 📦 Small bundle size\n\n## Installation\n\n```bash\nnpm install tailwind-ui-components\n```\n\n## Requirements\n\nThis library requires:\n\n- React 17 or 18\n- Tailwind CSS 3.x\n\n## Usage\n\nFirst, make sure you have Tailwind CSS set up in your project. Then, import the components you need:\n\n```jsx\nimport { Button, Card, Input, Modal } from 'tailwind-ui-components';\nimport 'tailwind-ui-components/dist/styles.css'; // Import the styles\n\nfunction App() {\n  return (\n    <div>\n      <Button>Click me</Button>\n      <Card>\n        <Card.Body>\n          <h2>Card Title</h2>\n          <p>Card content goes here</p>\n        </Card.Body>\n      </Card>\n    </div>\n  );\n}\n```\n\n## Components\n\n### Button\n\nA versatile button component with various styles and sizes.\n\n```jsx\n<Button \n  variant=\"primary\" // primary, secondary, outline, text\n  size=\"md\" // sm, md, lg\n  fullWidth={false} // true, false\n  disabled={false} // true, false\n  onClick={() => console.log('Clicked!')}\n>\n  Click me\n</Button>\n```\n\n### Card\n\nA flexible card component for displaying content.\n\n```jsx\n<Card \n  variant=\"default\" // default, elevated, outlined\n  hover={false} // true, false\n>\n  <Card.Header>Card Title</Card.Header>\n  <Card.Body>\n    <p>Card content goes here</p>\n  </Card.Body>\n  <Card.Footer>\n    <Button>Action</Button>\n  </Card.Footer>\n</Card>\n```\n\n### Input\n\nAn input component with various states and styles.\n\n```jsx\n<Input \n  type=\"text\" // any valid HTML input type\n  size=\"md\" // sm, md, lg\n  label=\"Username\"\n  placeholder=\"Enter your username\"\n  helperText=\"This will be your display name\"\n  error={false} // true, false\n  errorMessage=\"This field is required\"\n  fullWidth={false} // true, false\n  onChange={(e) => console.log(e.target.value)}\n/>\n```\n\n### Modal\n\nA modal dialog component for displaying content in a layer above the page.\n\n```jsx\nconst [isOpen, setIsOpen] = useState(false);\n\n<Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n<Modal \n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  size=\"md\" // sm, md, lg, xl\n>\n  <Modal.Header onClose={() => setIsOpen(false)}>Modal Title</Modal.Header>\n  <Modal.Body>\n    <p>Modal content goes here</p>\n  </Modal.Body>\n  <Modal.Footer>\n    <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n    <Button onClick={() => setIsOpen(false)}>Save</Button>\n  </Modal.Footer>\n</Modal>\n```\n\n## Customization\n\nYou can customize the components by:\n\n1. **Extending Tailwind's theme**: Modify your `tailwind.config.js` to add custom colors, spacing, etc.\n\n2. **Using the className prop**: All components accept a `className` prop that allows you to add additional Tailwind classes.\n\n```jsx\n<Button className=\"shadow-lg hover:shadow-xl\">\n  Custom Button\n</Button>\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-c4ce132120e8ca98da921833b92b2395"}