feat: add CounterLoading component with demo and documentation

.env.example

@@ -1 +1,2 @@
-NODE_ENV=developmnet
+NODE_ENV=developmnet
+ANALYZE=false

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Thanks for your interest in contributing to Nurui. We're happy to have you here.
+Thanks for your interest in contributing to Nur/ui. We're happy to have you here.
 
 This document will guide you through the process of setting up the project locally, contributing components, and following our commit conventions.
 
@@ -61,14 +61,15 @@ Please ensure that:
 - Any pull request made directly to the `main` branch **will be rejected**.
 
 #### Correct PR:
+
 `your-feature-branch ➡️ dev`
 
 #### Not Allowed:
+
 `your-feature-branch ➡️ main`
 
 This helps us keep the `main` branch stable and production-ready.
 
-
 ## Folder Structure
 
 ```bash
@@ -140,7 +141,7 @@ NURUI/
 
 ## How to Add a New Component to Nurui
 
-Follow these 4 simple steps to add a new UI component to the library.
+Follow these 7 simple steps to add a new UI component to the library.
 
 ---
 
@@ -166,25 +167,21 @@ shiny-button-demo.tsx    # Demo preview component
 
 ### Step 3: Register in componentRegistry.ts
 
-Open `src/registry/componentRegistry.ts` and add the following:
+Nur/ui now uses a dynamic registry system useing the function createEntry().
+
+Open `src/registry/componentRegistry.ts` and add your entry:
 
 Import the files:
 
 ```bash
-import ShinyButtonCode from "@/components/nurui/shiny-button.tsx?raw";
-import ShinyButtonDemo from "@/components/nurui/shiny-button-demo";
-import ShinyButtonDemoCode from "@/components/nurui/shiny-button-demo.tsx?raw";
-
+import { createEntry } from "@/utils/createEntry";
 
-Add entry to the Index object:
+export const componentsRegistry = {
+  shinyButton: createEntry("shiny-button", ["shiny-button"]),
+};
 
-shinyButton: {
-  preview: <ShinyButtonDemo />,
-  code: ShinyButtonDemoCode,
-  othersCode: [
-    { fileName: "shiny-button", code: ShinyButtonCode },
-  ],
-},
+## This automatically loads your preview and raw code dynamically.
+## If your component doesn’t follow the -demo pattern, the system will handle it conditionally.
 ```
 
 ### Step 4: Create .mdx File for Docs
@@ -240,6 +237,103 @@ description: "A glowing button component with customizable animations."
 | ...props   | `button`   | —     | Standard button props         |
 ```
 
+### Step 5: Add to registry.json
+
+This powers the web registry for component open in the v0.
+
+Open `registry.json` and add your entry:
+
+Import the files:
+
+```bash
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "nurui",
+  "homepage": "https://nurui.vercel.app",
+  "items": [
+   {
+      "name": "shiny-button",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": ["react-icons", "clsx", "tailwind-merge"],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/shiny-button-demo.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "./src/components/nurui/shiny-button.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+## Also you can add more dependencies and files if needed.
+```
+
+### Step 6: Add to registry-cli.json (for CLI Support)
+
+This enables users to install via:
+
+```bash
+npx nurui add shiny-button
+```
+
+Open `registry-cli.json` and add your entry:
+
+Import the files:
+
+```bash
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "nurui",
+  "homepage": "https://nurui.vercel.app",
+  "items": [
+   {
+      "name": "shiny-button",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": ["react-icons"],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/shiny-button.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+## Also you can add more dependencies and files if needed.
+## Note: do not need to add the demo file
+```
+
+### Step 7: Add Preview Page (Full Page Support)
+
+NurUI supports live previews for each component at `/preview/[component]`
+
+Open `src/app/preview/[component]/components-preview-registry.tsx` and add your entry:
+
+```bash
+import React from "react";
+import dynamic from "next/dynamic";
+
+export const componentsPreviewRegistry: Record<
+  string,
+  { component: React.ComponentType }
+> = {
+  "shiny-button": {
+    component: dynamic(
+      () => import("@/components/nurui/shiny-button-demo"),
+    ),
+  }}
+
+## If this component is not default export then use likt this:
+import("@/components/nurui/shiny-button-demo").then((mod) => mod.TextButtonDemo)
+```
+
 🔚 Done!
 Your component should now appear in the sidebar, render in the preview, and have complete documentation in MDX.
 

next.config.ts

@@ -1,5 +1,12 @@
 import type { NextConfig } from "next";
 import createMDX from "@next/mdx";
+import withBundleAnalyzer from "@next/bundle-analyzer";
+
+const isAnalyzerEnabled = process.env.ANALYZE === "true";
+
+const analyzer = withBundleAnalyzer({
+  enabled: isAnalyzerEnabled,
+});
 
 const nextConfig: NextConfig = {
   images: {
@@ -50,4 +57,5 @@ const withMDX = createMDX({
 });
 
 // Merge MDX config with Next.js config
-export default withMDX(nextConfig);
+// export default withMDX(nextConfig);
+export default analyzer(withMDX(nextConfig));

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "analyze": "cross-env ANALYZE=true next build"
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
@@ -25,6 +26,7 @@
     "@vercel/analytics": "^1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cross-env": "^10.1.0",
     "dotted-map": "^2.2.3",
     "gsap": "^3.13.0",
     "lodash": "^4.17.21",
@@ -61,6 +63,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@next/bundle-analyzer": "^15.5.4",
     "@react-three/drei": "^10.6.1",
     "@types/lodash": "^4.17.15",
     "@types/matter-js": "^0.20.0",
@@ -75,6 +78,7 @@
     "eslint-config-next": "15.1.7",
     "postcss": "^8",
     "raw-loader": "^4.0.2",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2"
   }
 }

registry-cli.json

@@ -470,19 +470,7 @@
         }
       ]
     },
-    {
-      "name": "copy-button",
-      "type": "registry:component",
-      "devDependencies": [],
-      "dependencies": ["lucide-react", "lottie-react"],
-      "registryDependencies": [],
-      "files": [
-        {
-          "path": "./src/components/nurui/copy-button.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
+
 
     {
       "name": "playing-card",

registry.json

@@ -620,23 +620,6 @@
         }
       ]
     },
-    {
-      "name": "copy-button",
-      "type": "registry:component",
-      "devDependencies": [],
-      "dependencies": ["lucide-react", "lottie-react"],
-      "registryDependencies": [],
-      "files": [
-        {
-          "path": "./src/components/nurui/copy-button-demo.tsx",
-          "type": "registry:component"
-        },
-        {
-          "path": "./src/components/nurui/copy-button.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
 
     {
       "name": "playing-card",

src/app/(docs)/docs/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { IChildren } from "@/types/types";
+import { IChildren } from "@/types/common.type";
 import ComponentsRightSidebar from "@/components/layout/components-layout/ComponentsRightSidebar";
 import { useAppContext } from "@/context/AppContext";
 import ComponentsFooter from "@/components/layout/components-layout/ComponentsFooter";
@@ -22,9 +22,7 @@ const Layout = ({ children }: IChildren) => {
           "xl:w-[calc(100%-18rem)]": !isLeftSideBar,
         })}
       >
-        <main className="px-6 md:px-12 py-8">
-          {children}
-        </main>
+        <main className="px-6 md:px-12 py-8">{children}</main>
         <ComponentsFooter />
       </div>
       <ComponentsRightSidebar />

src/app/layout.tsx

@@ -12,7 +12,6 @@ import { AppProvider } from "@/context/AppContext";
 import Navbar from "@/components/layout/Navbar";
 import Footer from "@/components/layout/Footer";
 import Banner from "@/components/ui/Banner";
-// import SplashCursorDemo from "@/components/common/SplashCursorDemo";
 
 const nunito = Nunito({
   variable: "--font-nunito",
@@ -99,7 +98,6 @@ export default function RootLayout({
           <ThemeProvider>
             <Toaster />
             <NProgressProvider />
-            {/* <SplashCursorDemo /> */}
             <Banner />
             <Navbar />
             <MainContent>{children}</MainContent>

src/app/preview/[component]/components-preview-registry.tsx

@@ -25,17 +25,13 @@ export const componentsPreviewRegistry: Record<
     ),
   },
   "animated-pricing": {
-    component: dynamic(() =>
-      import("@/components/nurui/animated-pricing-demo").then(
-        (mod) => mod.AnimatedPricingDemo,
-      ),
+    component: dynamic(
+      () => import("@/components/nurui/animated-pricing-demo"),
     ),
   },
   "creative-pricing": {
-    component: dynamic(() =>
-      import("@/components/nurui/creative-pricing-demo").then(
-        (mod) => mod.CreativePricingDemo,
-      ),
+    component: dynamic(
+      () => import("@/components/nurui/creative-pricing-demo"),
     ),
   },
   "grid-feature": {
@@ -56,18 +52,10 @@ export const componentsPreviewRegistry: Record<
     ),
   },
   "following-eye": {
-    component: dynamic(() =>
-      import("@/components/nurui/following-eye-demo").then(
-        (mod) => mod.FollowingEyeDemo,
-      ),
-    ),
+    component: dynamic(() => import("@/components/nurui/following-eye-demo")),
   },
   "animated-list": {
-    component: dynamic(() =>
-      import("@/components/nurui/animated-list-demo").then(
-        (mod) => mod.AnimatedListDemo,
-      ),
-    ),
+    component: dynamic(() => import("@/components/nurui/animated-list-demo")),
   },
   banner: {
     component: dynamic(() => import("@/components/nurui/banner-demo")),
@@ -144,22 +132,18 @@ export const componentsPreviewRegistry: Record<
       ),
     ),
   },
-  
-   "play-button": {
+
+  "play-button": {
     component: dynamic(() => import("@/components/nurui/play-button-demo")),
   },
-  "copy-button": {
-    component: dynamic(() => import("@/components/nurui/copy-button-demo")),
-  },
-  // loaders
 
-   "ripple-loader": {
+  // loaders
+  "ripple-loader": {
     component: dynamic(() => import("@/components/nurui/ripple-loader-demo")),
   },
-   "counter-loading": {
-    component: dynamic(() => import("@/components/nurui/counter-loading-demo")),
+  "counter-loader": {
+    component: dynamic(() => import("@/components/nurui/counter-loader-demo")),
   },
-
 
   // cards
   "playing-card": {

src/components/common/CLICommandButton.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { Button } from "../ui/button";
 import { FaTerminal } from "react-icons/fa";
 import { cn } from "@/lib/utils";
-import IClassName from "@/types/types";
+import IClassName from "@/types/common.type";
 import { FaCheck } from "react-icons/fa6";
 
 interface ClipboardButtonProps extends IClassName {