@cyberbloxai/ui-kit 0.1.1 → 0.1.2

package/README.md

@@ -22,28 +22,66 @@ CyberBlox UI Kit is a modular, themeable component library designed for building
 npm install @cyberbloxai/ui-kit
 ```
 
+> **Note**: If you are using **Tailwind CSS v4** and encounter a dependency conflict (`ERESOLVE`), you can install using:
+> `npm install @cyberbloxai/ui-kit --legacy-peer-deps`
+
 ## Quick Start
 
-1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`):
+1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`) **before** your other imports:
 
 ```tsx
 import "@cyberbloxai/ui-kit/styles.css";
 ```
 
-2. **Use Components**:
+2. **Tailwind CSS Configuration**:
+
+### For Tailwind CSS v4 (Recommended)
+In your main CSS file (e.g., `index.css` or `app.css`), ensure you have:
+```css
+@import "tailwindcss";
+/* If your components are unstyled, you may need to import the library CSS here instead */
+@import "@cyberbloxai/ui-kit/styles.css";
+```
+
+### For Tailwind CSS v3
+In your `tailwind.config.js`, you **must** add the library to the `content` array so Tailwind can find the classes used in the components:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@cyberbloxai/ui-kit/dist/**/*.{js,mjs}" // Add this line
+  ],
+  // ... rest of config
+}
+```
+
+3. **Use Components**:
 
 ```tsx
 import { Button } from "@cyberbloxai/ui-kit";
 
 function App() {
   return (
-    <Button variant="default" onClick={() => console.log("Clicked!")}>
-      Click Me
-    </Button>
+    <div className="p-8">
+      <Button variant="default" onClick={() => console.log("Clicked!")}>
+        Click Me
+      </Button>
+    </div>
   );
 }
 ```
 
+## Troubleshooting
+
+- **Blank Page / White Screen**: This usually indicates a JavaScript error. Check your browser console (`F12` -> Console).
+  - Ensure you have `react` and `react-dom` installed.
+  - If using Vite, try clearing your cache: `rm -rf node_modules/.vite` and restart with `npm run dev`.
+- **Unstyled Components**: Ensure you have imported `@cyberbloxai/ui-kit/styles.css` and configured your Tailwind `content` (for v3) or `@import` (for v4).
+
+
 ## Technologies Used
 
 - **Vite**: Next-generation frontend tooling.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Production-ready UI component library built on Radix UI + Tailwind CSS.",
   "repository": {
     "type": "git",
@@ -25,11 +25,13 @@
     "dist",
     "README.md"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tailwindcss": "^3.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.0.0 || ^4.0.0"
   },
   "scripts": {
     "dev": "vite",