@cyberbloxai/ui-kit 0.1.0 → 0.1.2

package/README.md

@@ -1,73 +1,114 @@
-# Welcome to your Lovable project
+# CyberBlox UI Kit
 
-## Project info
+Production-ready component library built with Radix UI and Tailwind CSS, developed by **Abhishek John Charan**.
 
-**URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
+**Live Preview**: [https://ui.cyberbloxai.in/](https://ui.cyberbloxai.in/)
 
-## How can I edit this code?
+## Overview
 
-There are several ways of editing your application.
+CyberBlox UI Kit is a modular, themeable component library designed for building SaaS applications faster. It includes production-grade components for authentication flows, dashboards, notifications, error pages, and more.
 
-**Use Lovable**
+## Key Features
 
-Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
+- **Type-Safe**: Full TypeScript support with proper generics and inference.
+- **Accessible**: WCAG compliant with proper ARIA labels and keyboard navigation.
+- **Themeable**: Easy customization using CSS variables and design tokens.
+- **Responsive**: Mobile-first design that looks great on every screen.
+- **Modular**: Tree-shakeable by default—import only what you need.
 
-Changes made via Lovable will be committed automatically to this repo.
+## Installation
 
-**Use your preferred IDE**
+```bash
+npm install @cyberbloxai/ui-kit
+```
 
-If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
+> **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`
 
-The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+## Quick Start
 
-Follow these steps:
+1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`) **before** your other imports:
 
-```sh
-# Step 1: Clone the repository using the project's Git URL.
-git clone <YOUR_GIT_URL>
+```tsx
+import "@cyberbloxai/ui-kit/styles.css";
+```
 
-# Step 2: Navigate to the project directory.
-cd <YOUR_PROJECT_NAME>
+2. **Tailwind CSS Configuration**:
 
-# Step 3: Install the necessary dependencies.
-npm i
+### 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";
+```
 
-# Step 4: Start the development server with auto-reloading and an instant preview.
-npm run dev
+### 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 (
+    <div className="p-8">
+      <Button variant="default" onClick={() => console.log("Clicked!")}>
+        Click Me
+      </Button>
+    </div>
+  );
+}
 ```
 
-**Edit a file directly in GitHub**
+## Troubleshooting
 
-- Navigate to the desired file(s).
-- Click the "Edit" button (pencil icon) at the top right of the file view.
-- Make your changes and commit the changes.
+- **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).
 
-**Use GitHub Codespaces**
 
-- Navigate to the main page of your repository.
-- Click on the "Code" button (green button) near the top right.
-- Select the "Codespaces" tab.
-- Click on "New codespace" to launch a new Codespace environment.
-- Edit files directly within the Codespace and commit and push your changes once you're done.
+## Technologies Used
 
-## What technologies are used for this project?
+- **Vite**: Next-generation frontend tooling.
+- **TypeScript**: Static typing for better developer experience.
+- **React**: For building user interfaces.
+- **Radix UI**: Unstyled, accessible UI primitives.
+- **Tailwind CSS**: Utility-first CSS framework.
+- **Lucide React**: Beautiful & consistent icons.
 
-This project is built with:
+## Development
 
-- Vite
-- TypeScript
-- React
-- shadcn-ui
-- Tailwind CSS
+If you want to contribute or run the project locally:
 
-## How can I deploy this project?
+```bash
+# Clone the repository
+git clone https://github.com/abhishekjohn1507/uni-kit-forge.git
 
-Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
+# Install dependencies
+npm install
 
-## Can I connect a custom domain to my Lovable project?
+# Start development server
+npm run dev
 
-Yes, you can!
+# Build the library
+npm run build:lib
+```
 
-To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
+## License
 
-Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
+Created by [Abhishek John Charan](https://github.com/abhishekjohn1507).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.1.0",
+  "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",