@cyberbloxai/ui-kit 0.1.1 → 0.2.0

package/README.md

@@ -18,32 +18,88 @@ CyberBlox UI Kit is a modular, themeable component library designed for building
 
 ## Installation
 
+There are two ways to use CyberBlox UI:
+
+### 1. shadcn-style (Recommended)
+This copies the component source code directly into your project, allowing you to customize everything.
+
+```bash
+# 1. Initialize the project (sets up utils)
+npx @cyberbloxai/ui-kit init
+
+# 2. Add components as needed
+npx @cyberbloxai/ui-kit add button
+npx @cyberbloxai/ui-kit add dialog
+```
+
+### 2. Standard Library Style
+Install it as a traditional npm package.
+
 ```bash
 npm install @cyberbloxai/ui-kit
 ```
 
-## Quick Start
+> **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`
 
-1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`):
+## Quick Start (Library Style)
+
+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
+
+- **CLI Not Working**: If `npx @cyberbloxai/ui-kit` fails, try `npx @cyberbloxai/ui-kit@latest`.
+- **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,7 +1,10 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.1.1",
-  "description": "Production-ready UI component library built on Radix UI + Tailwind CSS.",
+  "version": "0.2.0",
+  "description": "Production-ready UI component library built on Radix UI + Tailwind CSS. Supports shadcn-style component installation.",
+  "bin": {
+    "cyberblox": "./src/cli.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/abhishekjohn1507/uni-kit-forge.git"
@@ -23,13 +26,16 @@
   },
   "files": [
     "dist",
+    "src",
     "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",

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx

@@ -0,0 +1,31 @@
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Index from "./pages/Index";
+import ComponentsList from "./pages/ComponentsList";
+import ComponentDetail from "./pages/ComponentDetail";
+import NotFound from "./pages/NotFound";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/components" element={<ComponentsList />} />
+          <Route path="/components/:id" element={<ComponentDetail />} />
+          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
+);
+
+export default App;

package/src/cli.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// This script will be located in node_modules/@cyberbloxai/ui-kit/src/cli.js
+// We need to find the source components directory relative to this script.
+const packageRoot = path.join(__dirname, '..');
+const componentsSrc = path.join(packageRoot, 'src', 'components', 'ui');
+const utilsSrc = path.join(packageRoot, 'src', 'lib', 'utils.ts');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+function getTargetDir() {
+  const isSrcExists = fs.existsSync(path.join(process.cwd(), 'src'));
+  return isSrcExists ? path.join(process.cwd(), 'src') : process.cwd();
+}
+
+function copyFile(src, dest) {
+  const destDir = path.dirname(dest);
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true });
+  }
+  fs.copyFileSync(src, dest);
+  console.log(`  Created ${path.relative(process.cwd(), dest)}`);
+}
+
+function init() {
+  console.log('Initializing CyberBlox UI components...');
+  const targetBase = getTargetDir();
+  
+  // Copy utils
+  const utilsDest = path.join(targetBase, 'lib', 'utils.ts');
+  copyFile(utilsSrc, utilsDest);
+
+  console.log('\nSuccess! Now you can add components using:');
+  console.log('npx cyberblox add [component-name]');
+}
+
+function addComponent(name) {
+  if (!name) {
+    console.error('Please specify a component name, e.g., npx cyberblox add button');
+    process.exit(1);
+  }
+
+  const fileName = name.endsWith('.tsx') ? name : `${name}.tsx`;
+  const srcPath = path.join(componentsSrc, fileName);
+  
+  if (!fs.existsSync(srcPath)) {
+    console.error(`Component "${name}" not found in library.`);
+    process.exit(1);
+  }
+
+  const targetBase = getTargetDir();
+  const destPath = path.join(targetBase, 'components', 'ui', fileName);
+  
+  copyFile(srcPath, destPath);
+  console.log(`\nComponent "${name}" added successfully!`);
+}
+
+function listComponents() {
+  console.log('Available components:');
+  const files = fs.readdirSync(componentsSrc);
+  files.forEach(file => {
+    if (file.endsWith('.tsx')) {
+      console.log(`- ${file.replace('.tsx', '')}`);
+    }
+  });
+}
+
+switch (command) {
+  case 'init':
+    init();
+    break;
+  case 'add':
+    addComponent(args[1]);
+    break;
+  case 'list':
+    listComponents();
+    break;
+  default:
+    console.log('CyberBlox UI CLI');
+    console.log('\nUsage:');
+    console.log('  npx cyberblox init         - Setup lib/utils.ts');
+    console.log('  npx cyberblox add [name]   - Add a component to your project');
+    console.log('  npx cyberblox list         - List all available components');
+    break;
+}

package/src/components/CodeBlock.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+const CodeBlock = ({ code, language = "tsx", className }: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn("relative group", className)}>
+      <div className="flex items-center justify-between px-4 py-2 bg-muted/80 border border-border/40 rounded-t-lg">
+        <span className="text-xs font-mono text-muted-foreground">{language}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {copied ? (
+            <>
+              <Check className="h-3.5 w-3.5 text-success" />
+              <span>Copied</span>
+            </>
+          ) : (
+            <>
+              <Copy className="h-3.5 w-3.5" />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      <pre className="overflow-x-auto p-4 bg-background/80 border border-t-0 border-border/40 rounded-b-lg">
+        <code className="text-sm font-mono text-foreground/90 leading-relaxed whitespace-pre">
+          {code}
+        </code>
+      </pre>
+    </div>
+  );
+};
+
+export default CodeBlock;

package/src/components/ComponentLivePreview.tsx

@@ -0,0 +1,310 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog, DialogTrigger, DialogContent,
+  DialogHeader, DialogTitle, DialogDescription,
+  DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import {
+  Drawer, DrawerTrigger, DrawerContent,
+  DrawerHeader, DrawerTitle, DrawerDescription,
+  DrawerFooter, DrawerClose,
+} from "@/components/ui/drawer";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Select, SelectTrigger, SelectValue, SelectContent,
+  SelectItem, SelectGroup, SelectLabel,
+} from "@/components/ui/select";
+import {
+  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+} from "@/components/ui/accordion";
+import {
+  Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
+} from "@/components/ui/tooltip";
+import { Loader2, ArrowRight, Plus, Settings, Info } from "lucide-react";
+
+interface Props {
+  componentId: string;
+}
+
+const ComponentLivePreview = ({ componentId }: Props) => {
+  const [sliderVal, setSliderVal] = useState([50]);
+
+  switch (componentId) {
+    case "button":
+      return (
+        <div className="flex flex-wrap gap-3">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+          <Button disabled><Loader2 className="mr-2 h-4 w-4 animate-spin" />Loading</Button>
+          <Button size="icon"><ArrowRight /></Button>
+        </div>
+      );
+
+    case "input":
+      return (
+        <div className="space-y-3 max-w-sm">
+          <Input placeholder="Default input" />
+          <Input type="email" placeholder="Email input" />
+          <Input placeholder="Disabled" disabled />
+        </div>
+      );
+
+    case "badge":
+      return (
+        <div className="flex flex-wrap gap-2">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </div>
+      );
+
+    case "switch":
+      return (
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <Switch id="s1" />
+            <Label htmlFor="s1">Off by default</Label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Switch id="s2" defaultChecked />
+            <Label htmlFor="s2">On by default</Label>
+          </div>
+        </div>
+      );
+
+    case "slider":
+      return (
+        <div className="space-y-4 max-w-sm">
+          <div className="space-y-2">
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>Volume</span>
+              <span>{sliderVal[0]}%</span>
+            </div>
+            <Slider value={sliderVal} onValueChange={setSliderVal} max={100} step={1} />
+          </div>
+        </div>
+      );
+
+    case "checkbox":
+      return (
+        <div className="space-y-3">
+          {["Design system", "Components", "Documentation"].map((label) => (
+            <div key={label} className="flex items-center gap-2">
+              <Checkbox id={label} />
+              <Label htmlFor={label}>{label}</Label>
+            </div>
+          ))}
+        </div>
+      );
+
+    case "progress":
+      return (
+        <div className="space-y-4 max-w-sm">
+          <Progress value={30} />
+          <Progress value={60} />
+          <Progress value={90} />
+        </div>
+      );
+
+    case "avatar":
+      return (
+        <div className="flex items-center gap-4">
+          <div className="flex -space-x-2">
+            {["AK", "BR", "CS", "DW"].map((i) => (
+              <Avatar key={i} className="h-10 w-10 border-2 border-background">
+                <AvatarFallback className="bg-primary/20 text-primary text-xs">{i}</AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+          <Avatar className="h-14 w-14">
+            <AvatarFallback className="bg-accent/20 text-accent text-lg">JD</AvatarFallback>
+          </Avatar>
+        </div>
+      );
+
+    case "textarea":
+      return (
+        <div className="space-y-2 max-w-sm">
+          <Label htmlFor="bio">Bio</Label>
+          <Textarea id="bio" placeholder="Tell us about yourself..." rows={4} />
+        </div>
+      );
+
+    case "skeleton":
+      return (
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[200px]" />
+            <Skeleton className="h-4 w-[150px]" />
+          </div>
+        </div>
+      );
+
+    case "label":
+      return (
+        <div className="space-y-2 max-w-sm">
+          <Label htmlFor="demo">Full Name</Label>
+          <Input id="demo" placeholder="John Doe" />
+        </div>
+      );
+
+    case "dialog":
+      return (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline">Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Are you sure?</DialogTitle>
+              <DialogDescription>This action cannot be undone.</DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+    case "drawer":
+      return (
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Settings</DrawerTitle>
+              <DrawerDescription>Adjust your preferences below.</DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Notifications</Label>
+                <Switch />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>Dark Mode</Label>
+                <Switch defaultChecked />
+              </div>
+            </div>
+            <DrawerFooter>
+              <Button>Save Changes</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      );
+
+    case "tabs":
+      return (
+        <Tabs defaultValue="overview" className="w-full max-w-md">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview" className="mt-3 text-sm text-muted-foreground">
+            <p>Here's a quick summary of your project status and recent activity.</p>
+          </TabsContent>
+          <TabsContent value="analytics" className="mt-3 text-sm text-muted-foreground">
+            <p>View charts and metrics about your usage and performance.</p>
+          </TabsContent>
+          <TabsContent value="settings" className="mt-3 text-sm text-muted-foreground">
+            <p>Configure notifications, integrations, and account preferences.</p>
+          </TabsContent>
+        </Tabs>
+      );
+
+    case "select":
+      return (
+        <div className="space-y-3 max-w-[220px]">
+          <Label>Favorite fruit</Label>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Fruits</SelectLabel>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="orange">Orange</SelectItem>
+                <SelectItem value="grape">Grape</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+
+    case "accordion":
+      return (
+        <Accordion type="single" collapsible className="w-full max-w-md">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>Yes. It comes with default styles that match the design system.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>Yes. It uses CSS animations for smooth open and close transitions.</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+    case "tooltip":
+      return (
+        <TooltipProvider>
+          <div className="flex flex-wrap gap-3">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Plus className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent><p>Add item</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Settings className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom"><p>Settings</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Info className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent side="right"><p>More info</p></TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+      );
+
+    default:
+      return <p className="text-muted-foreground text-sm">No preview available.</p>;
+  }
+};
+
+export default ComponentLivePreview;

package/src/components/NavLink.tsx

@@ -0,0 +1,28 @@
+import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };