From 447f31342339e3d331888bf3b7583de08c071f3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 14 Jan 2026 14:54:44 +0300
Subject: [PATCH 1/2] feat: implement tree-shaking

---
 @codexteam/ui/.gitignore                      |  23 ++
 @codexteam/ui/.npmignore                      |   1 +
 @codexteam/ui/dev/index.html                  |   2 +
 @codexteam/ui/package.json                    |  35 +-
 @codexteam/ui/src/styles/fonts.pcss           |   2 +
 @codexteam/ui/src/styles/index.pcss           |   1 -
 @codexteam/ui/src/styles/typography.pcss      |   2 -
 .../ui/src/vue/components/chart/Chart.vue     | 323 +++++++++---------
 .../ui/src/vue/components/chart/ChartLine.vue |   6 +-
 .../ui/src/vue/components/counter/Counter.vue |   8 +-
 .../ui/src/vue/components/editor/Editor.vue   |   2 +-
 .../ui/src/vue/components/tabbar/Tabbar.vue   |   4 +-
 .../components/theme-preview/ThemePreview.vue |   4 +-
 @codexteam/ui/tsconfig.dts.json               |   3 +-
 @codexteam/ui/vite.config.ts                  |  25 +-
 15 files changed, 257 insertions(+), 184 deletions(-)
 create mode 100644 @codexteam/ui/.gitignore
 create mode 100644 @codexteam/ui/src/styles/fonts.pcss

diff --git a/@codexteam/ui/.gitignore b/@codexteam/ui/.gitignore
new file mode 100644
index 00000000..edd8c274
--- /dev/null
+++ b/@codexteam/ui/.gitignore
@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Logs
+*.log
+
+# Test app (internal testing only)
+test-app/
+
+# Editor
+.idea/
+.vscode/
+*.sw?
+
+# OS
+.DS_Store
+
+# Environment
+.env
+.env.local
diff --git a/@codexteam/ui/.npmignore b/@codexteam/ui/.npmignore
index cac6efbf..483359e4 100644
--- a/@codexteam/ui/.npmignore
+++ b/@codexteam/ui/.npmignore
@@ -1,4 +1,5 @@
 dev/
+test-app/
 node_modules/
 src/
 *.log
diff --git a/@codexteam/ui/dev/index.html b/@codexteam/ui/dev/index.html
index aa1fe81c..40e8bba0 100644
--- a/@codexteam/ui/dev/index.html
+++ b/@codexteam/ui/dev/index.html
@@ -10,7 +10,9 @@
   <script type="module">
     import { createApp } from 'vue';
     import { createRouter, createWebHashHistory } from 'vue-router';
+    import "../src/styles/fonts.pcss";
     import "../src/styles/index.pcss";
+    import "../src/styles/themes/index.pcss";
 
     import Playground from './Playground.vue';
     import routes from './routes';
diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index 288d0626..a0c1d620 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -2,6 +2,10 @@
   "name": "@codexteam/ui",
   "version": "0.1.1",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.pcss"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "yarn build-src && yarn build-types",
@@ -17,12 +21,35 @@
   ],
   "exports": {
     "./vue": {
-      "import": {
-        "default": "./dist/vue.js"
-      }
+      "types": "./dist/types/vue/index.d.ts",
+      "import": "./dist/vue.js"
     },
     "./styles": {
-      "import": "./dist/styles.css"
+      "import": "./dist/style.css"
+    },
+    "./styles/themes/graphite": {
+      "import": "./dist/styles/themes/graphite.css"
+    },
+    "./styles/themes/crimson": {
+      "import": "./dist/styles/themes/crimson.css"
+    },
+    "./styles/themes/red": {
+      "import": "./dist/styles/themes/red.css"
+    },
+    "./styles/themes/violet": {
+      "import": "./dist/styles/themes/violet.css"
+    },
+    "./styles/themes/grass": {
+      "import": "./dist/styles/themes/grass.css"
+    },
+    "./styles/themes/amber": {
+      "import": "./dist/styles/themes/amber.css"
+    },
+    "./styles/themes/pure": {
+      "import": "./dist/styles/themes/pure.css"
+    },
+    "./styles/themes/sky": {
+      "import": "./dist/styles/themes/sky.css"
     }
   },
   "devDependencies": {
diff --git a/@codexteam/ui/src/styles/fonts.pcss b/@codexteam/ui/src/styles/fonts.pcss
new file mode 100644
index 00000000..e882ab29
--- /dev/null
+++ b/@codexteam/ui/src/styles/fonts.pcss
@@ -0,0 +1,2 @@
+@import url('../fonts/Inter/inter.css');
+@import url('../fonts/JetBrainsMono/JetBrainsMono.css');
diff --git a/@codexteam/ui/src/styles/index.pcss b/@codexteam/ui/src/styles/index.pcss
index d610b922..70369e9a 100644
--- a/@codexteam/ui/src/styles/index.pcss
+++ b/@codexteam/ui/src/styles/index.pcss
@@ -1,4 +1,3 @@
-@import './themes/index.pcss';
 @import './dimensions.pcss';
 @import './typography.pcss';
 @import './mixins.pcss';
diff --git a/@codexteam/ui/src/styles/typography.pcss b/@codexteam/ui/src/styles/typography.pcss
index 1c08c5de..195f0140 100644
--- a/@codexteam/ui/src/styles/typography.pcss
+++ b/@codexteam/ui/src/styles/typography.pcss
@@ -1,5 +1,3 @@
-@import url('../fonts/Inter/inter.css');
-@import url('../fonts/JetBrainsMono/JetBrainsMono.css');
 
 /**
  * Fonts setup
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.vue b/@codexteam/ui/src/vue/components/chart/Chart.vue
index d1d586b7..fe592be8 100644
--- a/@codexteam/ui/src/vue/components/chart/Chart.vue
+++ b/@codexteam/ui/src/vue/components/chart/Chart.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="chart"
+    :class="$style.chart"
     @mousemove.passive="moveTooltip"
     @mouseleave.passive="hoveredIndex = -1"
   >
     <svg
       ref="chart"
-      class="chart__body"
+      :class="$style.chart__body"
     >
       <ChartLine
         v-for="(preparedLine, index) in preparedLines"
@@ -22,15 +22,15 @@
       />
     </svg>
     <div
-      class="chart__ox"
+      :class="$style.chart__ox"
     >
       <div
-        class="chart__ox-inner"
+        :class="$style['chart__ox-inner']"
       >
         <span
           v-for="item in visibleLegendPoints"
           :key="item.index"
-          class="chart__ox-item"
+          :class="$style['chart__ox-item']"
           :style="{ left: `${item.index * stepX}px`, transform: 'translateX(-50%)' }"
         >
           {{ formatTimestamp(item.point.timestamp * 1000) }}
@@ -40,7 +40,7 @@
     <div
       v-if="hoveredIndex >= 0 && hoveredIndex < firstLineData.length"
       :style="{ transform: `translateX(${pointerLeft}px)` }"
-      class="chart__pointer"
+      :class="$style.chart__pointer"
     >
       <template
         v-for="(preparedLine, index) in preparedLines"
@@ -52,19 +52,18 @@
             transform: `translateY(${getLinePointerTop(preparedLine)}px)`,
             backgroundColor: getCursorColor(preparedLine.line)
           }"
-          class="chart__pointer-cursor"
-          :class="`chart__pointer-cursor--${preparedLine.line.label}`"
+          :class="$style['chart__pointer-cursor']"
         />
       </template>
       <div
-        class="chart__pointer-tooltip"
-        :class="{
-          'chart__pointer-tooltip--left': tooltipAlignment === 'left',
-          'chart__pointer-tooltip--right': tooltipAlignment === 'right'
-        }"
+        :class="[
+          $style['chart__pointer-tooltip'],
+          tooltipAlignment === 'left' && $style['chart__pointer-tooltip--left'],
+          tooltipAlignment === 'right' && $style['chart__pointer-tooltip--right']
+        ]"
         :style="{ minWidth: `${(String(firstLineData[hoveredIndex].count).length + ' events'.length) * 6.4 + 12}px` }"
       >
-        <div class="chart__pointer-tooltip-date">
+        <div :class="$style['chart__pointer-tooltip-date']">
           {{ formatTimestamp(firstLineData[hoveredIndex].timestamp * 1000) }}
         </div>
         <template
@@ -73,12 +72,12 @@
           <div
             v-if="!preparedLine.allZeros"
             :key="`tooltip-line-${preparedLine.line.label}-${index}`"
-            class="chart__pointer-tooltip-number"
+            :class="$style['chart__pointer-tooltip-number']"
           >
             <AnimatedCounter :value="formatSpacedNumber(getLineValueAtHoveredIndex(preparedLine.line, hoveredIndex))" />
             {{ preparedLine.line.label }}
             <span
-              class="chart__pointer-tooltip-dot"
+              :class="$style['chart__pointer-tooltip-dot']"
               :style="{ backgroundColor: getCursorColor(preparedLine.line) }"
             />
           </div>
@@ -505,160 +504,160 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
-  .chart {
-    position: relative;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    height: 215px;
-    background-color: var(--base--bg-secondary);
-    border-radius: var(--radius-s);
-
-    --legend-height: 40px;
-    --legend-line-height: 11px;
-    --legend-block-padding: 15px;
-
-    &__info {
-      position: absolute;
-      top: var(--spacing-ml);
-      right: var(--spacing-ml);
-      padding: var(--spacing-xs) var(--spacing-ms);
-      color: var(--base--text);
-      font-size: 13px;
-      white-space: nowrap;
-      background: color-mod(var(--base--bg-primary) alpha(50%));
-      border-radius: var(--radius-s);
-
-      &-today {
-        color: var(--base--text-secondary);
-      }
+<style module>
+.chart {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+  height: 215px;
+  background-color: var(--base--bg-secondary);
+  border-radius: var(--radius-s);
+
+  --legend-height: 40px;
+  --legend-line-height: 11px;
+  --legend-block-padding: 15px;
+}
 
-      &-highlight {
-        margin-left: var(--spacing-xs);
-        font-weight: bold;
-      }
-    }
+.chart__info {
+  position: absolute;
+  top: var(--spacing-ml);
+  right: var(--spacing-ml);
+  padding: var(--spacing-xs) var(--spacing-ms);
+  color: var(--base--text);
+  font-size: 13px;
+  white-space: nowrap;
+  background: color-mod(var(--base--bg-primary) alpha(50%));
+  border-radius: var(--radius-s);
+}
 
-    &__body {
-      flex-grow: 2;
-    }
+.chart__info-today {
+  color: var(--base--text-secondary);
+}
 
-    &__ox {
-      height: var(--legend-height);
-      padding-block: var(--legend-block-padding);
-      box-sizing: border-box;
+.chart__info-highlight {
+  margin-left: var(--spacing-xs);
+  font-weight: bold;
+}
 
-      &-inner {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+.chart__body {
+  flex-grow: 2;
+}
 
-      &-item {
-        position: absolute;
-        left: 0;
-        color: var(--base--text);
-        font-size: 11px;
-        line-height: var(--legend-line-height);
-        text-align: center;
-        transform-origin: center;
-        opacity: 0.3;
-        white-space: nowrap;
-
-        &:first-of-type,
-        &:last-of-type {
-          display: none;
-        }
-      }
-    }
+.chart__ox {
+  height: var(--legend-height);
+  padding-block: var(--legend-block-padding);
+  box-sizing: border-box;
+}
 
-    &__pointer {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      width: 3px;
-      height: 100%;
-      margin-left: -1.5px;
-      background-color: rgba(25, 28, 37, 0.5);
-      animation: pointer-in 200ms ease;
-      will-change: opacity, transform;
-
-      &-cursor {
-        position: absolute;
-        top: 0;
-        width: 7px;
-        height: 7px;
-        margin-top: -3.5px;
-        margin-left: -2px;
-        border-radius: 50%;
-        opacity: 1;
-        will-change: transform;
-      }
+.chart__ox-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
 
-      &-tooltip {
-        --tooltip-block-padding: var(--spacing-xs);
-
-        position: absolute;
-        top: calc(100% - var(--legend-height) + var(--legend-block-padding) - var(--tooltip-block-padding) - 1px);
-        left: 50%;
-        z-index: 500;
-        padding-block: var(--tooltip-block-padding);
-        padding-inline: var(--spacing-s);
-        color: var(--base--text);
-        font-size: 12px;
-        line-height: 1.4;
-        letter-spacing: 0.2px;
-        white-space: nowrap;
-        text-align: center;
-        background: var(--base--bg-primary);
-        border-radius: var(--radius-m);
-        box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.12);
-        transform: translateX(-50%);
-        transition: min-width 150ms ease;
-
-        &--left {
-          left: 0;
-          transform: translateX(0);
-        }
-
-        &--right {
-          right: 0;
-          left: auto;
-          transform: translateX(0);
-        }
-
-        &-date {
-          margin-bottom: var(--spacing-very-x);
-          color: var(--base--text-secondary);
-          font-size: 11px;
-        }
-
-        &-number {
-          font-weight: 500;
-        }
-
-        &-dot {
-          display: inline-block;
-          width: 5px;
-          height: 5px;
-          border-radius: 50%;
-          vertical-align: middle;
-          margin-left: 2px;
-          margin-top: -1px;
-        }
-      }
-    }
-  }
+.chart__ox-item {
+  position: absolute;
+  left: 0;
+  color: var(--base--text);
+  font-size: 11px;
+  line-height: var(--legend-line-height);
+  text-align: center;
+  transform-origin: center;
+  opacity: 0.3;
+  white-space: nowrap;
+}
 
-  @keyframes pointer-in {
-    from {
-      opacity: 0;
-    }
+.chart__ox-item:first-of-type,
+.chart__ox-item:last-of-type {
+  display: none;
+}
 
-    to {
-      opacity: 1;
-    }
+.chart__pointer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 3px;
+  height: 100%;
+  margin-left: -1.5px;
+  background-color: rgba(25, 28, 37, 0.5);
+  animation: pointer-in 200ms ease;
+  will-change: opacity, transform;
+}
+
+.chart__pointer-cursor {
+  position: absolute;
+  top: 0;
+  width: 7px;
+  height: 7px;
+  margin-top: -3.5px;
+  margin-left: -2px;
+  border-radius: 50%;
+  opacity: 1;
+  will-change: transform;
+}
+
+.chart__pointer-tooltip {
+  --tooltip-block-padding: var(--spacing-xs);
+
+  position: absolute;
+  top: calc(100% - var(--legend-height) + var(--legend-block-padding) - var(--tooltip-block-padding) - 1px);
+  left: 50%;
+  z-index: 500;
+  padding-block: var(--tooltip-block-padding);
+  padding-inline: var(--spacing-s);
+  color: var(--base--text);
+  font-size: 12px;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  text-align: center;
+  background: var(--base--bg-primary);
+  border-radius: var(--radius-m);
+  box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.12);
+  transform: translateX(-50%);
+  transition: min-width 150ms ease;
+}
+
+.chart__pointer-tooltip--left {
+  left: 0;
+  transform: translateX(0);
+}
+
+.chart__pointer-tooltip--right {
+  right: 0;
+  left: auto;
+  transform: translateX(0);
+}
+
+.chart__pointer-tooltip-date {
+  margin-bottom: var(--spacing-very-x);
+  color: var(--base--text-secondary);
+  font-size: 11px;
+}
+
+.chart__pointer-tooltip-number {
+  font-weight: 500;
+}
+
+.chart__pointer-tooltip-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-left: 2px;
+  margin-top: -1px;
+}
+
+@keyframes pointer-in {
+  from {
+    opacity: 0;
   }
+
+  to {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/@codexteam/ui/src/vue/components/chart/ChartLine.vue b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
index fedbc1c2..9e7501bb 100644
--- a/@codexteam/ui/src/vue/components/chart/ChartLine.vue
+++ b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
@@ -29,12 +29,12 @@
       </linearGradient>
     </defs>
     <path
-      class="chart__body-path-fill"
+      :class="$style['chart__body-path-fill']"
       :fill="`url(#${fillGradientId})`"
       :d="smoothPathFill"
     />
     <path
-      class="chart__body-path"
+      :class="$style['chart__body-path']"
       fill="none"
       :stroke="`url(#${gradientId})`"
       stroke-width="3"
@@ -249,7 +249,7 @@ const colorSet = computed((): ChartLineColors => {
 });
 </script>
 
-<style>
+<style module>
 .chart__body-path-fill {
   stroke: none;
   vector-effect: non-scaling-stroke;
diff --git a/@codexteam/ui/src/vue/components/counter/Counter.vue b/@codexteam/ui/src/vue/components/counter/Counter.vue
index af18f82e..707ff36d 100644
--- a/@codexteam/ui/src/vue/components/counter/Counter.vue
+++ b/@codexteam/ui/src/vue/components/counter/Counter.vue
@@ -1,14 +1,14 @@
 <template>
-  <span class="a-counter">
+  <span :class="$style['a-counter']">
     <span
       v-if="prevValue !== null"
-      class="a-counter__prev"
+      :class="$style['a-counter__prev']"
     >
       {{ prevValue }}
     </span>
     <span
       v-if="curValue !== null"
-      class="a-counter__cur"
+      :class="$style['a-counter__cur']"
     >
       {{ curValue }}
     </span>
@@ -48,7 +48,7 @@ watch(() => props.value, (newValue, oldValue) => {
 });
 </script>
 
-<style>
+<style module>
   .a-counter {
     position: relative;
     display: inline-block;
diff --git a/@codexteam/ui/src/vue/components/editor/Editor.vue b/@codexteam/ui/src/vue/components/editor/Editor.vue
index 71f3d134..9666e4de 100644
--- a/@codexteam/ui/src/vue/components/editor/Editor.vue
+++ b/@codexteam/ui/src/vue/components/editor/Editor.vue
@@ -92,7 +92,7 @@ defineExpose({
 });
 </script>
 
-<style>
+<style module>
 @import '../../../styles/typography.pcss';
 
 .editorjs {
diff --git a/@codexteam/ui/src/vue/components/tabbar/Tabbar.vue b/@codexteam/ui/src/vue/components/tabbar/Tabbar.vue
index 8bf98bdf..ddc60681 100644
--- a/@codexteam/ui/src/vue/components/tabbar/Tabbar.vue
+++ b/@codexteam/ui/src/vue/components/tabbar/Tabbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabbar">
+  <div :class="$style.tabbar">
     <Tab
       v-for="tab in tabs"
       :key="tab.id"
@@ -25,7 +25,7 @@ defineProps<{
 
 </script>
 
-<style land="postcss">
+<style module lang="postcss">
 .tabbar {
   --min-width: calc(var(--v-padding) * 2 + var(--size-icon));
   display: flex;
diff --git a/@codexteam/ui/src/vue/components/theme-preview/ThemePreview.vue b/@codexteam/ui/src/vue/components/theme-preview/ThemePreview.vue
index 9d5e76d5..e0ab8bac 100644
--- a/@codexteam/ui/src/vue/components/theme-preview/ThemePreview.vue
+++ b/@codexteam/ui/src/vue/components/theme-preview/ThemePreview.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="theme-preview"
+    :class="$style['theme-preview']"
     :theme-base="theme.toLowerCase()"
   />
 </template>
@@ -15,7 +15,7 @@ defineProps<{
 
 </script>
 
-<style lang="postcss">
+<style  module lang="postcss">
 
 .theme-preview {
   width: 30px;
diff --git a/@codexteam/ui/tsconfig.dts.json b/@codexteam/ui/tsconfig.dts.json
index 5bb98352..ead3d107 100644
--- a/@codexteam/ui/tsconfig.dts.json
+++ b/@codexteam/ui/tsconfig.dts.json
@@ -5,7 +5,8 @@
     "declaration": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "outDir": "dist"
+    "outDir": "dist/types",
+    "declarationMap": false
   },
   "include": ["src"]
 }
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index f6717a98..1f1389d1 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -23,10 +23,26 @@ export default defineConfig({
       fileName: (format, entryName) => `${entryName}.js`,
       formats: ['es'],
     },
-    cssCodeSplit: false,
+    cssCodeSplit: true,
     rollupOptions: {
       input: {
-        styles: resolve(__dirname, 'src/styles/index.pcss'),
+        /**
+         * Base styles - dimensions, typography, mixins, z-axis
+         */
+        style: resolve(__dirname, 'src/styles/index.pcss'),
+
+        /**
+         * Individual themes for tree-shaking
+         */
+        'styles/themes/graphite': resolve(__dirname, 'src/styles/themes/graphite.pcss'),
+        'styles/themes/crimson': resolve(__dirname, 'src/styles/themes/crimson.pcss'),
+        'styles/themes/red': resolve(__dirname, 'src/styles/themes/red.pcss'),
+        'styles/themes/violet': resolve(__dirname, 'src/styles/themes/violet.pcss'),
+        'styles/themes/grass': resolve(__dirname, 'src/styles/themes/grass.pcss'),
+        'styles/themes/amber': resolve(__dirname, 'src/styles/themes/amber.pcss'),
+        'styles/themes/pure': resolve(__dirname, 'src/styles/themes/pure.pcss'),
+        'styles/themes/sky': resolve(__dirname, 'src/styles/themes/sky.pcss'),
+
         vue: resolve(__dirname, 'src/vue/index.ts'),
       },
       output: {
@@ -36,6 +52,11 @@ export default defineConfig({
         globals: {
           vue: 'Vue',
         },
+        /**
+         * Preserve module structure for better tree shaking
+         */
+        preserveModules: true,
+        preserveModulesRoot: 'src',
       },
       // make sure to externalize deps that shouldn't be bundled
       // into your library

From 387141166385c35d33468671b8bfcaeff6231b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 14 Jan 2026 16:12:42 +0300
Subject: [PATCH 2/2] minor changes

---
 @codexteam/ui/README.md      | 120 ++++++++++++++++++++++++++++++-----
 @codexteam/ui/package.json   |   2 +-
 @codexteam/ui/vite.config.ts |   2 +-
 3 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/@codexteam/ui/README.md b/@codexteam/ui/README.md
index 6f8f56ff..6509440f 100644
--- a/@codexteam/ui/README.md
+++ b/@codexteam/ui/README.md
@@ -4,50 +4,136 @@ The Design System forged in the fires of open-source development
 
 Demo: https://cdx-ui.vercel.app/
 
-- [ ] Make tree-shaking work
+- [x] Make tree-shaking work
 - [ ] Test Web/React/Native implementations
 - [ ] Think about i18n
 
-## Access Vue components
+## Installation
 
-```ts
-import { Button, Input, Heading } from '@codexteam/ui/vue';
+```bash
+npm install @codexteam/ui
+# or
+yarn add @codexteam/ui
 ```
 
+## Quick Start
+
+### 1. Import Base Styles (Required)
+
+```typescript
+// main.ts
+import '@codexteam/ui/styles';
+```
+
+### 2. Import Themes (Tree-shakeable)
+
+Import only the themes you need - others will NOT be included in the bundle:
+
+```typescript
+import '@codexteam/ui/styles/themes/pure';
+import '@codexteam/ui/styles/themes/grass';
+```
+
+**Available themes:** `graphite`, `crimson`, `red`, `violet`, `grass`, `amber`, `pure`, `sky`
+
+### 3. Import Components (Tree-shakeable)
+
+```typescript
+import { Button, Avatar, Heading } from '@codexteam/ui/vue';
+```
+
+### 4. Apply Theme in Template
+
+```vue
+<template>
+  <div color-scheme="light" theme-accent="pure" theme-base="grass">
+    <Button>Click me</Button>
+  </div>
+</template>
+```
+
+## Complete Example
+
+**main.ts:**
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+
+// Base styles (required)
+import '@codexteam/ui/styles';
+
+// Themes (import only what you need)
+import '@codexteam/ui/styles/themes/pure';
+import '@codexteam/ui/styles/themes/grass';
+
+createApp(App).mount('#app');
+```
+
+**App.vue:**
 ```vue
-<Heading :level="2">
-  CodeX UI showcase
-</Heading>
-<Button text="Button text" />
-<Input text="Input text" />
+<script setup lang="ts">
+import { Button, Heading, Input } from '@codexteam/ui/vue';
+</script>
+
+<template>
+  <div color-scheme="light" theme-accent="pure" theme-base="grass">
+    <Heading :level="2">CodeX UI showcase</Heading>
+    <Button>Button text</Button>
+    <Input placeholder="Input text" />
+  </div>
+</template>
 ```
 
 ## Types for Vue Components
 
 Add the following "path" to the "tsconfig.json"
 
-```
+```json
 {
   "compilerOptions": {
     "paths": {
-      "@codexteam/ui/vue": ["../@codexteam/ui/dist/types/vue/index.d.ts"],
+      "@codexteam/ui/vue": ["../@codexteam/ui/dist/types/vue/index.d.ts"]
     }
-  },
+  }
 }
-
 ```
 
 ## Build Design System
 Build the design system to be able to use the @codexteam/ui/styles import
 
-```
+```bash
 yarn build
 ```
 
-## Access CSS variables
+## Custom Theming
+
+If you don't want to use built-in themes, define your own CSS variables:
+
+```css
+:root {
+  /* Base colors */
+  --base--bg-primary: #ffffff;
+  --base--bg-secondary: #f5f5f5;
+  --base--bg-secondary-hover: #eeeeee;
+  --base--border: #e0e0e0;
+  --base--text: #333333;
+  --base--text-secondary: #666666;
+  --base--solid: #000000;
+  --base--text-solid-foreground: #ffffff;
+
+  /* Accent colors */
+  --accent--solid: #2196f3;
+  --accent--solid-hover: #1976d2;
+  --accent--bg-secondary: #e3f2fd;
+  --accent--text-solid-foreground: #ffffff;
+}
+```
+
+## Access CSS Variables
 
-1. Import `@codexteam/ui/styles` somewhere in App
-2. Use variable in CSS, e.g `var(--ui-color)`
+1. Import `@codexteam/ui/styles` in your app
+2. Import themes you need (e.g., `@codexteam/ui/styles/themes/pure`)
+3. Use variables in CSS: `var(--base--text)`, `var(--accent--solid)`
 
 ## Using Typography
 
diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index a0c1d620..55461aa1 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "sideEffects": [
     "*.css",
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index 1f1389d1..417d22cc 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
@@ -74,7 +75,6 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       '@/': '/src/',
     },
   },