{"_id":"@427rohitkumar/ui-components","_rev":"2-61ff67d8528382aff7557b9bcdb6862c","name":"@427rohitkumar/ui-components","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@427rohitkumar/ui-components","version":"0.1.0","keywords":["react","ui-components","tailwindcss","design-system","component-library"],"license":"MIT","_id":"@427rohitkumar/ui-components@0.1.0","maintainers":[{"name":"427rohitkumar","email":"427rohitkumar@gmail.com"}],"dist":{"shasum":"ce9c75c63be2d530077c801f2c258052a971cb0b","tarball":"https://registry.npmjs.org/@427rohitkumar/ui-components/-/ui-components-0.1.0.tgz","fileCount":25,"integrity":"sha512-SUlX78v2luZpd/FY7Ts9ISCxBVdNwf5pEZcYy3PgwwGa1djhCLhGnoy2+7q/iCOQP2iWhfbK2nAqhs5pqcCoRA==","signatures":[{"sig":"MEUCIQD46AIfjU3FN2vi5uFbRmAEk1xW2BhNdY34iRlf79jszQIgUz6CSZv1xjKtBySXz3tiKi11yUrygJ9eyrnZN7JSarI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28127},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"427rohitkumar","email":"427rohitkumar@gmail.com"},"_npmVersion":"10.9.2","description":"Reusable React UI components with Tailwind CSS","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3","tailwindcss":"^4.1.18","@types/react":"^19.2.7","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_0.1.0_1767865093238_0.2426557693544653","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@427rohitkumar/ui-components","version":"0.1.1","description":"Reusable React UI components with Tailwind CSS","license":"MIT","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"typescript":"^5.9.3","tailwindcss":"^4.1.18","@types/react":"^19.2.7","@types/react-dom":"^19.2.3"},"keywords":["react","ui-components","tailwindcss","design-system","component-library"],"publishConfig":{"access":"public"},"_id":"@427rohitkumar/ui-components@0.1.1","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-YlYXrnxVPsI0/Ps8INffz92Q+HiydwhjOFxfkW74DSM8VQKX6vwu3VxqqG4W6m8pwei1xYwENvGVUFawgSfYQg==","shasum":"6f37daaab448908d91574ff66f388dba2b9649cf","tarball":"https://registry.npmjs.org/@427rohitkumar/ui-components/-/ui-components-0.1.1.tgz","fileCount":26,"unpackedSize":33545,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD99l+2betI3F9FS/f05QG6NzOWjP+NVxvDF1QVlhSJIAIhANhWm1/BeWfk/gRutXDSykQKFf/hPY/hKQxsHeqoKy9c"}]},"_npmUser":{"name":"427rohitkumar","email":"427rohitkumar@gmail.com"},"directories":{},"maintainers":[{"name":"427rohitkumar","email":"427rohitkumar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_0.1.1_1767865782340_0.17563689156978435"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-08T09:38:13.154Z","modified":"2026-01-08T09:49:42.661Z","0.1.0":"2026-01-08T09:38:13.384Z","0.1.1":"2026-01-08T09:49:42.476Z"},"license":"MIT","keywords":["react","ui-components","tailwindcss","design-system","component-library"],"description":"Reusable React UI components with Tailwind CSS","maintainers":[{"name":"427rohitkumar","email":"427rohitkumar@gmail.com"}],"readme":"\r\n# UI Components Library\r\n\r\nA reusable **React UI component library** built with **TypeScript** and **Tailwind CSS**.  \r\nDesigned to be **framework-agnostic**, lightweight, and easy to integrate in **Next.js** or any React project.\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- ✅ Reusable, composable UI components\r\n- ✅ Tailwind CSS based styling\r\n- ✅ TypeScript support with `.d.ts`\r\n- ✅ No Next.js hard dependency\r\n- ✅ Supports Next.js features via injection (Link, Image, Router)\r\n- ✅ Safe peerDependencies (no duplicate React)\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @427rohitkumar/ui-components\r\n````\r\n\r\nor\r\n\r\n```bash\r\nyarn add @427rohitkumar/ui-components\r\n```\r\n\r\n---\r\n\r\n## ⚠️ Required Setup (Important)\r\n\r\nThis library **does NOT bundle Tailwind CSS**.\r\n\r\nYour project **must already have Tailwind CSS installed**.\r\n\r\n👉 If you are using **Next.js**, follow:\r\n[https://tailwindcss.com/docs/guides/nextjs](https://tailwindcss.com/docs/guides/nextjs)\r\n\r\n👉 If you are using **React / Vite**, follow:\r\n[https://tailwindcss.com/docs/guides/vite](https://tailwindcss.com/docs/guides/vite)\r\n\r\n---\r\n\r\n## 🚀 Usage\r\n\r\n```tsx\r\nimport {\r\n  ActionButton,\r\n  TextField,\r\n  SelectField,\r\n  TextAreaField,\r\n  ImageUpload,\r\n  ImageGalleryUpload,\r\n  PageTitle,\r\n  PageRouteHeader,\r\n  Container,\r\n  Section,\r\n  Stack,\r\n  Row,\r\n} from \"@427rohitkumar/ui-components\";\r\n```\r\n\r\n---\r\n\r\n## 🧩 Components\r\n\r\n---\r\n\r\n### 🔘 ActionButton\r\n\r\nReusable button or link component.\r\n\r\n```tsx\r\n<ActionButton\r\n  text=\"Save\"\r\n  onClick={handleSave}\r\n  className=\"bg-blue-600 text-white\"\r\n/>\r\n```\r\n\r\n🔹 As a link (framework-agnostic):\r\n\r\n```tsx\r\n<ActionButton\r\n  text=\"Go to Projects\"\r\n  href=\"/projects\"\r\n/>\r\n```\r\n\r\n👉 **Next.js routing (recommended):**\r\n\r\n```tsx\r\nimport Link from \"next/link\";\r\n\r\n<Link href=\"/projects\">\r\n  <ActionButton text=\"Go to Projects\" />\r\n</Link>\r\n```\r\n\r\n---\r\n\r\n### 📝 Form Fields\r\n\r\n#### TextField\r\n\r\n```tsx\r\n<TextField\r\n  label=\"Title\"\r\n  name=\"title\"\r\n  value={title}\r\n  onChange={(e) => setTitle(e.target.value)}\r\n/>\r\n```\r\n\r\n#### SelectField\r\n\r\n```tsx\r\n<SelectField\r\n  label=\"Category\"\r\n  name=\"category\"\r\n  value={category}\r\n  options={[\r\n    { label: \"Web\", value: \"web\" },\r\n    { label: \"Mobile\", value: \"mobile\" },\r\n  ]}\r\n  onChange={(e) => setCategory(e.target.value)}\r\n/>\r\n```\r\n\r\n#### TextAreaField (with auto resize + counter)\r\n\r\n```tsx\r\n<TextAreaField\r\n  label=\"Description\"\r\n  name=\"description\"\r\n  value={description}\r\n  maxLength={300}\r\n  onChange={(e) => setDescription(e.target.value)}\r\n/>\r\n```\r\n\r\n---\r\n\r\n### 🖼️ ImageUpload (Single Image)\r\n\r\nFramework-agnostic by default.\r\n\r\n```tsx\r\n<ImageUpload\r\n  value={image}\r\n  onChange={setImage}\r\n/>\r\n```\r\n\r\n#### ✅ With Next.js Image Optimization\r\n\r\n```tsx\r\nimport Image from \"next/image\";\r\n\r\n<ImageUpload\r\n  value={image}\r\n  onChange={setImage}\r\n  ImageComponent={(props) => (\r\n    <Image {...props} width={120} height={120} />\r\n  )}\r\n/>\r\n```\r\n\r\n---\r\n\r\n### 🖼️ ImageGalleryUpload (Multiple Images)\r\n\r\n```tsx\r\nconst [images, setImages] = useState<File[]>([]);\r\n\r\n<ImageGalleryUpload\r\n  value={images}\r\n  onChange={setImages}\r\n  maxFiles={6}\r\n/>\r\n```\r\n\r\n#### With Next.js Image Optimization\r\n\r\n```tsx\r\n<ImageGalleryUpload\r\n  value={images}\r\n  onChange={setImages}\r\n  ImageComponent={(props) => (\r\n    <Image {...props} width={150} height={150} />\r\n  )}\r\n/>\r\n```\r\n\r\n---\r\n\r\n### 🧭 PageTitle & PageRouteHeader\r\n\r\n#### PageTitle\r\n\r\n```tsx\r\n<PageTitle\r\n  title=\"Create Project\"\r\n  description=\"Add a new project to your portfolio\"\r\n/>\r\n```\r\n\r\n#### PageRouteHeader (routing injected)\r\n\r\n```tsx\r\nimport { useRouter, usePathname } from \"next/navigation\";\r\n\r\n<PageRouteHeader\r\n  currentPath={usePathname()}\r\n  onBack={() => useRouter().back()}\r\n  backIcon={<ArrowLeft size={18} />}\r\n/>\r\n```\r\n\r\n---\r\n\r\n### 📐 Layout Components\r\n\r\n#### Container\r\n\r\n```tsx\r\n<Container>\r\n  <YourContent />\r\n</Container>\r\n```\r\n\r\n#### Section\r\n\r\n```tsx\r\n<Section title=\"Details\">\r\n  <Form />\r\n</Section>\r\n```\r\n\r\n#### Stack (vertical)\r\n\r\n```tsx\r\n<Stack gap={4}>\r\n  <Item />\r\n  <Item />\r\n</Stack>\r\n```\r\n\r\n#### Row (horizontal / wrap)\r\n\r\n```tsx\r\n<Row gap={3} wrap align=\"center\">\r\n  <Chip />\r\n  <Chip />\r\n</Row>\r\n```\r\n\r\n---\r\n\r\n## 🎨 Custom Styling\r\n\r\nAll components accept `className` and related props.\r\n\r\nExample:\r\n\r\n```tsx\r\n<TextField\r\n  className=\"border-gray-600\"\r\n  labelClassName=\"text-gray-400\"\r\n/>\r\n```\r\n\r\n---\r\n\r\n## 🔐 Peer Dependencies\r\n\r\nThis library uses **peerDependencies** to avoid conflicts:\r\n\r\n```json\r\n\"react\": \">=18\",\r\n\"react-dom\": \">=18\"\r\n```\r\n\r\nMake sure your project satisfies these.\r\n\r\n---\r\n\r\n## 🛠️ Development Philosophy\r\n\r\n* UI library = **props in → UI out**\r\n* No routing, no framework hooks inside\r\n* Framework features are **injected**, not imported\r\n* Designed for **scalability and reuse**\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT © <your-name>\r\n\r\n---\r\n\r\n## ⭐ Support\r\n\r\nIf you find this library useful:\r\n\r\n* ⭐ Star the repository\r\n* 🐞 Report issues\r\n* 💡 Suggest improvements\r\n\r\n---\r\n\r\nHappy building 🚀\r\n\r\n```\r\n\r\n---\r\n\r\n## ✅ What you should do now\r\n\r\n1. Save this as **`README.md`** in your project root  \r\n2. Commit it to GitHub (if repo exists)  \r\n3. (Optional) Update README on npm package page  \r\n\r\n---\r\n\r\nIf you want next:\r\n- `short-readme` → a smaller npm-only version  \r\n- `badges` → npm / version / license badges  \r\n- `examples` → full Next.js demo repo  \r\n\r\nJust say the word.\r\n```\r\n","readmeFilename":"README.md"}