diff --git a/.gitignore b/.gitignore
index 916456d..5d84304 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,7 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
-public/components
+public/ui
 
 /cypress/videos/
 /cypress/screenshots/
diff --git a/package.json b/package.json
index de576c5..1079e9c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "npm run build:registry && run-p type-check \"build-only {@}\" --",
-    "build:registry": "jsrepo build --dirs ./src/content --output-dir ./public/components",
+    "build:registry": "jsrepo build --dirs ./src/content --output-dir ./public/ui",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
diff --git a/src/components/code/CliInstallation.vue b/src/components/code/CliInstallation.vue
index 9ad8d42..6f26351 100644
--- a/src/components/code/CliInstallation.vue
+++ b/src/components/code/CliInstallation.vue
@@ -23,7 +23,7 @@
             <p class="demo-extra-info">1. Initialize a config file for your project</p>
 
             <div class="setup-option">
-              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vue-bits.dev" highlightjs
+              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vue-bits.dev/ui" highlightjs
                 lang="bash" theme="nord" :copy-button="true" class="code-block" />
             </div>
 
diff --git a/src/constants/code/Animations/fadeContentCode.ts b/src/constants/code/Animations/fadeContentCode.ts
index b448284..711dfb0 100644
--- a/src/constants/code/Animations/fadeContentCode.ts
+++ b/src/constants/code/Animations/fadeContentCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Animations/FadeContent/FadeContent.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const fadeContent: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/Animations/FadeContent`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/FadeContent`,
   usage: `<template>
   <FadeContent
     :blur="true"
diff --git a/src/constants/code/Backgrounds/dotGridCode.ts b/src/constants/code/Backgrounds/dotGridCode.ts
index 2e323d7..d1e4b5a 100644
--- a/src/constants/code/Backgrounds/dotGridCode.ts
+++ b/src/constants/code/Backgrounds/dotGridCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const dotGrid: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/Backgrounds/DotGrid`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/DotGrid`,
   installation: `npm install gsap`,
   usage: `<template>
   <div class="dot-grid-container">
diff --git a/src/constants/code/Components/masonryCode.ts b/src/constants/code/Components/masonryCode.ts
index 1e62924..41657da 100644
--- a/src/constants/code/Components/masonryCode.ts
+++ b/src/constants/code/Components/masonryCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Components/Masonry/Masonry.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const masonry: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/Components/Masonry`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Masonry`,
   installation: `npm install gsap`,
   usage: `<template>
   <Masonry
diff --git a/src/constants/code/TextAnimations/splitTextCode.ts b/src/constants/code/TextAnimations/splitTextCode.ts
index b1eda58..6e1b354 100644
--- a/src/constants/code/TextAnimations/splitTextCode.ts
+++ b/src/constants/code/TextAnimations/splitTextCode.ts
@@ -3,7 +3,7 @@ import code from '@content/TextAnimations/SplitText/SplitText.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const splitText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/TextAnimations/SplitText`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/SplitText`,
   installation: `npm install gsap`,
   usage: `<template>
   <SplitText