diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx
index e6e890a4d..35f603951 100644
--- a/apps/component-tests/src/root.tsx
+++ b/apps/component-tests/src/root.tsx
@@ -13,7 +13,7 @@ import {
   ThemeModes,
   ThemePrimaryColors,
   ThemeStyles,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 
 export default component$(() => {
   /**
diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
index f4ef794e6..8c239f5ef 100644
--- a/apps/website/src/components/copy-css-config/copy-css-config.tsx
+++ b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -1,7 +1,7 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import { Modal } from '@qwik-ui/headless';
 import { Button } from '~/components/ui';
-import { extractThemeCSS } from '@qwik-ui/utils';
+import { extractThemeCSS } from '@qwik-ui/extract-theme';
 import { LuX } from '@qwikest/icons/lucide';
 import { useTheme } from '@qwik-ui/themes';
 import globalCSS from '~/global.css?raw';
diff --git a/apps/website/src/components/make-it-yours/make-it-yours.tsx b/apps/website/src/components/make-it-yours/make-it-yours.tsx
index 2bda6fe25..ef8e337f9 100644
--- a/apps/website/src/components/make-it-yours/make-it-yours.tsx
+++ b/apps/website/src/components/make-it-yours/make-it-yours.tsx
@@ -7,8 +7,8 @@ import {
   ThemeModes,
   ThemePrimaryColors,
   ThemeStyles,
-  cn,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
+import { cn } from '@qwik-ui/utils';
 import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
 import { useTheme } from '@qwik-ui/themes';
 
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
index 2be94acad..6c92e47ca 100644
--- a/apps/website/src/root.tsx
+++ b/apps/website/src/root.tsx
@@ -15,7 +15,7 @@ import {
   ThemeModes,
   ThemePrimaryColors,
   ThemeStyles,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { ModulePreload } from './components/module-preload/module-preload';
 
 export default component$(() => {
diff --git a/packages/cli/bin/index.ts b/packages/cli/bin/index.ts
index 61ce28a79..dce30b2cd 100644
--- a/packages/cli/bin/index.ts
+++ b/packages/cli/bin/index.ts
@@ -27,7 +27,7 @@ import {
   ThemePrimaryColors,
   ThemeStyle,
   ThemeStyles,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { bgRgb, bold, cyan, green, red } from 'ansis';
 import { execSync } from 'child_process';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
diff --git a/packages/cli/src/generators/setup-tailwind/schema.d.ts b/packages/cli/src/generators/setup-tailwind/schema.d.ts
index 2649cf238..c2b65bd2d 100644
--- a/packages/cli/src/generators/setup-tailwind/schema.d.ts
+++ b/packages/cli/src/generators/setup-tailwind/schema.d.ts
@@ -1,4 +1,4 @@
-import type { ThemeConfig } from '@qwik-ui/utils';
+import type { ThemeConfig } from '@qwik-ui/extract-theme';
 
 export interface SetupTailwindGeneratorSchema extends ThemeConfig {
   projectRoot?: string;
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 12bfa6e36..c52364555 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -1,5 +1,9 @@
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { ThemeBorderRadiuses, ThemePrimaryColors, ThemeStyles } from '@qwik-ui/utils';
+import {
+  ThemeBorderRadiuses,
+  ThemePrimaryColors,
+  ThemeStyles,
+} from '@qwik-ui/extract-theme';
 import { SetupTailwindGeneratorSchema } from './schema';
 import { setupTailwindGenerator } from './setup-tailwind-generator';
 
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
index 50751c232..0bfad212b 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
@@ -7,7 +7,7 @@ import {
   extractBetweenComments,
   extractThemeCSS,
   type ThemeConfig,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import { getKitRoot } from '../../_shared/get-kit-root';
diff --git a/packages/extract-theme/.eslintrc.json b/packages/extract-theme/.eslintrc.json
new file mode 100644
index 000000000..9d9c0db55
--- /dev/null
+++ b/packages/extract-theme/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/packages/extract-theme/CHANGELOG.md b/packages/extract-theme/CHANGELOG.md
new file mode 100644
index 000000000..9a2defb00
--- /dev/null
+++ b/packages/extract-theme/CHANGELOG.md
@@ -0,0 +1,42 @@
+# Changelog
+
+## 0.3.1
+
+### Patch Changes
+
+- ✨ new inline component utilities (by [@thejackshelton](https://github.com/thejackshelton) in [#937](https://github.com/qwikifiers/qwik-ui/pull/937))
+
+## 0.3.0
+
+### Minor Changes
+
+- Changed enums to const maps in utils (by [@shairez](https://github.com/shairez) in [#914](https://github.com/qwikifiers/qwik-ui/pull/914))
+
+## 0.2.1
+
+### Patch Changes
+
+- ✨ added `extractThemeCSS` (by [@shairez](https://github.com/shairez) in [#604](https://github.com/qwikifiers/qwik-ui/pull/604))
+
+## 0.2.0
+
+### Minor Changes
+
+- Removed `useOrdinal` (by [@shairez](https://github.com/shairez) in [`4043d29`](https://github.com/qwikifiers/qwik-ui/commit/4043d29dcc39b03f16c79d659da592af3fbeafeb))
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [0.1.1](https://github.com/qwikifiers/qwik-ui/compare/utils-0.1.0...utils-0.1.1) (2024-01-09)
+
+# [0.1.0](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.3...utils-0.1.0) (2023-12-16)
+
+### Bug Fixes
+
+- **docs:** add install / related docs / merge with main ([bb1b62c](https://github.com/qwikifiers/qwik-ui/commit/bb1b62cd87d376858fd706e9b5344603be87127c))
+- **everything:** fix 1.3 craziness ([0b20d97](https://github.com/qwikifiers/qwik-ui/commit/0b20d97af41f75bc7e1215391fd1c202ee8a9366))
+
+## [0.0.3](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.2...utils-0.0.3) (2023-12-01)
+
+## [0.0.2](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.1...utils-0.0.2) (2023-12-01)
+
+## 0.0.1 (2023-11-30)
diff --git a/packages/extract-theme/LICENSE b/packages/extract-theme/LICENSE
new file mode 100644
index 000000000..3f40df030
--- /dev/null
+++ b/packages/extract-theme/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 HiRez.io, Qwikifiers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/extract-theme/README.md b/packages/extract-theme/README.md
new file mode 100644
index 000000000..5dc7517d1
--- /dev/null
+++ b/packages/extract-theme/README.md
@@ -0,0 +1,20 @@
+# Qwik UI extract-theme
+
+## `stringifyClassList`
+
+A function that takes a Qwik class list and returns a string.
+Good for cases you are working with other libraries that require a string as an input.
+
+## `cva`
+
+This is a version of the original code from [cva](https://cva.style/) but optimized for Qwik apps.
+
+Thanks to [Joe Bell](https://twitter.com/joebell_) for creating the original library.
+
+## `tcva`
+
+CVA with Tailwind merge built in.
+
+# License
+
+MIT
diff --git a/packages/extract-theme/package.json b/packages/extract-theme/package.json
new file mode 100644
index 000000000..9852523f4
--- /dev/null
+++ b/packages/extract-theme/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@qwik-ui/extract-theme",
+  "version": "0.3.1",
+  "description": "Qwik UI extract-theme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qwikifiers/qwik-ui",
+    "directory": "packages/extract-theme"
+  },
+  "main": "./index.qwik.cjs",
+  "qwik": "./index.qwik.mjs",
+  "module": "./index.qwik.mjs",
+  "types": "./index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.qwik.mjs",
+      "require": "./index.qwik.cjs"
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "private": false,
+  "dependencies": {
+    "tailwind-merge": "^1.14.0",
+    "clsx": "^2.0.0",
+    "qwik-themes": "^0.2.0"
+  }
+}
diff --git a/packages/extract-theme/project.json b/packages/extract-theme/project.json
new file mode 100644
index 000000000..c03b23615
--- /dev/null
+++ b/packages/extract-theme/project.json
@@ -0,0 +1,61 @@
+{
+  "name": "extract-theme",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/extract-theme/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/extract-theme",
+        "configFile": "packages/extract-theme/vite.config.ts",
+        "mode": "lib"
+      },
+      "configurations": {
+        "development": {},
+        "production": {}
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/extract-theme/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["logic"]
+      }
+    },
+    "setup-chrome-108": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "setup.chrome.108"
+      }
+    },
+    "e2e-chrome-108": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "dependsOn": ["setup-chrome-108"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["popover-chrome-108"]
+      }
+    },
+    "visual-test": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["visual"]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/packages/utils/src/theme/extract-between-comments.ts b/packages/extract-theme/src/extract-between-comments.ts
similarity index 100%
rename from packages/utils/src/theme/extract-between-comments.ts
rename to packages/extract-theme/src/extract-between-comments.ts
diff --git a/packages/utils/src/theme/extract-theme-css.spec.ts b/packages/extract-theme/src/extract-theme-css.spec.ts
similarity index 100%
rename from packages/utils/src/theme/extract-theme-css.spec.ts
rename to packages/extract-theme/src/extract-theme-css.spec.ts
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/extract-theme/src/extract-theme-css.ts
similarity index 100%
rename from packages/utils/src/theme/extract-theme-css.ts
rename to packages/extract-theme/src/extract-theme-css.ts
diff --git a/packages/extract-theme/src/index.ts b/packages/extract-theme/src/index.ts
new file mode 100644
index 000000000..67188da82
--- /dev/null
+++ b/packages/extract-theme/src/index.ts
@@ -0,0 +1,9 @@
+export { extractBetweenComments } from './extract-between-comments';
+export { extractThemeCSS } from './extract-theme-css';
+export { ThemeBaseColors, type ThemeBaseColor } from './theme-base-colors';
+export { ThemeBorderRadiuses, type ThemeBorderRadius } from './theme-border-radiuses';
+export { type ThemeConfig } from './theme-config.type';
+export { ThemeFonts, type ThemeFont } from './theme-fonts';
+export { ThemeModes, type ThemeMode } from './theme-modes';
+export { ThemePrimaryColors, type ThemePrimaryColor } from './theme-primary-colors';
+export { ThemeStyles, type ThemeStyle } from './theme-styles';
diff --git a/packages/extract-theme/src/root.tsx b/packages/extract-theme/src/root.tsx
new file mode 100644
index 000000000..218a3ba6b
--- /dev/null
+++ b/packages/extract-theme/src/root.tsx
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default () => {};
+
+// THIS FILE IS ONLY HERE TO SATISFY QWIK BUILD
diff --git a/packages/utils/src/theme/theme-base-colors.ts b/packages/extract-theme/src/theme-base-colors.ts
similarity index 83%
rename from packages/utils/src/theme/theme-base-colors.ts
rename to packages/extract-theme/src/theme-base-colors.ts
index 53d6297af..882389cb6 100644
--- a/packages/utils/src/theme/theme-base-colors.ts
+++ b/packages/extract-theme/src/theme-base-colors.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeBaseColors = {
   SLATE: 'base-slate',
diff --git a/packages/utils/src/theme/theme-border-radiuses.ts b/packages/extract-theme/src/theme-border-radiuses.ts
similarity index 88%
rename from packages/utils/src/theme/theme-border-radiuses.ts
rename to packages/extract-theme/src/theme-border-radiuses.ts
index fce211896..612fc4a72 100644
--- a/packages/utils/src/theme/theme-border-radiuses.ts
+++ b/packages/extract-theme/src/theme-border-radiuses.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeBorderRadiuses = {
   'BORDER-RADIUS-0': 'border-radius-0',
diff --git a/packages/utils/src/theme/theme-config.type.ts b/packages/extract-theme/src/theme-config.type.ts
similarity index 100%
rename from packages/utils/src/theme/theme-config.type.ts
rename to packages/extract-theme/src/theme-config.type.ts
diff --git a/packages/utils/src/theme/theme-fonts.ts b/packages/extract-theme/src/theme-fonts.ts
similarity index 86%
rename from packages/utils/src/theme/theme-fonts.ts
rename to packages/extract-theme/src/theme-fonts.ts
index 32ed95605..58e2e5703 100644
--- a/packages/utils/src/theme/theme-fonts.ts
+++ b/packages/extract-theme/src/theme-fonts.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeFonts = {
   MONO: 'font-mono',
diff --git a/packages/utils/src/theme/theme-modes.ts b/packages/extract-theme/src/theme-modes.ts
similarity index 74%
rename from packages/utils/src/theme/theme-modes.ts
rename to packages/extract-theme/src/theme-modes.ts
index 7e64a3e86..7ea18f8c1 100644
--- a/packages/utils/src/theme/theme-modes.ts
+++ b/packages/extract-theme/src/theme-modes.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeModes = {
   LIGHT: 'light',
diff --git a/packages/utils/src/theme/theme-primary-colors.ts b/packages/extract-theme/src/theme-primary-colors.ts
similarity index 99%
rename from packages/utils/src/theme/theme-primary-colors.ts
rename to packages/extract-theme/src/theme-primary-colors.ts
index 3887741fb..290ad549c 100644
--- a/packages/utils/src/theme/theme-primary-colors.ts
+++ b/packages/extract-theme/src/theme-primary-colors.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemePrimaryColors = {
   SLATE100: 'primary-slate-100',
diff --git a/packages/utils/src/theme/theme-styles.ts b/packages/extract-theme/src/theme-styles.ts
similarity index 79%
rename from packages/utils/src/theme/theme-styles.ts
rename to packages/extract-theme/src/theme-styles.ts
index 65e469524..a53658036 100644
--- a/packages/utils/src/theme/theme-styles.ts
+++ b/packages/extract-theme/src/theme-styles.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeStyles = {
   SIMPLE: 'simple',
diff --git a/packages/extract-theme/src/type-utils.ts b/packages/extract-theme/src/type-utils.ts
new file mode 100644
index 000000000..e21529c98
--- /dev/null
+++ b/packages/extract-theme/src/type-utils.ts
@@ -0,0 +1 @@
+export type ObjectValues<T> = T[keyof T];
diff --git a/packages/extract-theme/tsconfig.json b/packages/extract-theme/tsconfig.json
new file mode 100644
index 000000000..47dad120a
--- /dev/null
+++ b/packages/extract-theme/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "types": ["vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/packages/extract-theme/tsconfig.lib.json b/packages/extract-theme/tsconfig.lib.json
new file mode 100644
index 000000000..33eca2c2c
--- /dev/null
+++ b/packages/extract-theme/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/packages/extract-theme/tsconfig.spec.json b/packages/extract-theme/tsconfig.spec.json
new file mode 100644
index 000000000..6a4c53c4f
--- /dev/null
+++ b/packages/extract-theme/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/packages/extract-theme/vite.config.ts b/packages/extract-theme/vite.config.ts
new file mode 100644
index 000000000..6a7333369
--- /dev/null
+++ b/packages/extract-theme/vite.config.ts
@@ -0,0 +1,76 @@
+/// <reference types="vitest" />
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import pkg from './package.json';
+
+const { dependencies = {}, peerDependencies = {} } = pkg as any;
+const makeRegex = (dep: any) => new RegExp(`^${dep}(/.*)?$`);
+const excludeAll = (obj: any) => Object.keys(obj).map(makeRegex);
+
+export default defineConfig({
+  plugins: [
+    qwikVite(),
+    tsconfigPaths({ root: '../../' }),
+    dts({
+      tsconfigPath: join(dirname(fileURLToPath(import.meta.url)), 'tsconfig.lib.json'),
+      entryRoot: 'src',
+      afterDiagnostic(ds) {
+        // ensure DTS errors are still visible - otherwise get swallowed and silent
+        console.log((ds ?? []).map((d) => d.messageText));
+
+        const nonPortableTypeErrors = ds.filter((d) => d.code === 2742);
+        if (nonPortableTypeErrors.length > 0) {
+          // stop the build for 2742 specifically
+          return Promise.reject(nonPortableTypeErrors);
+        }
+
+        return;
+      },
+    }),
+    viteStaticCopy({
+      targets: [{ src: './README.md', dest: './' }],
+    }),
+  ],
+  server: {
+    fs: {
+      // Allow serving files from the project root
+      allow: ['../../'],
+    },
+  },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  optimizeDeps: {
+    include: ['css-tree'],
+  },
+  build: {
+    target: 'es2022',
+    lib: {
+      entry: './src/index.ts',
+      // Could also be a dictionary or array of multiple entry points.
+      name: 'extract-theme',
+      fileName: (format, entryName) =>
+        `${entryName}.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
+      // fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: [
+        /^node:.*/,
+        ...excludeAll(dependencies),
+        ...excludeAll(peerDependencies),
+      ],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'packages/extract-theme/src',
+      },
+    },
+  },
+});
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 84f350e8c..bb7522240 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,11 +1,2 @@
-export * from './cn';
-export * from './theme/extract-between-comments';
-export * from './theme/extract-theme-css';
-export * from './theme/theme-base-colors';
-export * from './theme/theme-border-radiuses';
-export * from './theme/theme-config.type';
-export * from './theme/theme-fonts';
-export * from './theme/theme-modes';
-export * from './theme/theme-primary-colors';
-export * from './theme/theme-styles';
-export * from './inline-component';
+export { cn } from './cn';
+export { processChildren, findComponent } from './inline-component';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13aa54883..bd3009235 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,7 +67,7 @@ importers:
         version: 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(ts-node@10.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))
       '@nx/vite':
         specifier: 19.4.2
-        version: 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))
+        version: 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)
       '@nx/workspace':
         specifier: 19.4.2
         version: 19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))
@@ -109,7 +109,7 @@ importers:
         version: 7.9.0(eslint@8.57.0)(typescript@5.4.5)
       '@vitest/coverage-v8':
         specifier: ^1.6.0
-        version: 1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))
+        version: 1.6.0(vitest@1.6.0)
       '@vitest/ui':
         specifier: ^1.6.0
         version: 1.6.0(vitest@1.6.0)
@@ -202,7 +202,7 @@ importers:
         version: 4.0.0(prettier@3.2.5)
       qwik-nx:
         specifier: ^2.3.0
-        version: 2.3.0(6rocepx3yltcemdfak7x4h4way)
+        version: 2.3.0(yfeuwrzyzw4p6vciz27cdhykpq)
       qwik-themes:
         specifier: ^0.2.0
         version: 0.2.0
@@ -310,6 +310,18 @@ importers:
         specifier: 0.3.0
         version: link:../kit-styled
 
+  packages/extract-theme:
+    dependencies:
+      clsx:
+        specifier: ^2.0.0
+        version: 2.1.1
+      qwik-themes:
+        specifier: ^0.2.0
+        version: 0.2.0
+      tailwind-merge:
+        specifier: ^1.14.0
+        version: 1.14.0
+
   packages/kit-headless:
     dependencies:
       '@builder.io/qwik':
@@ -9889,9 +9901,9 @@ snapshots:
       - '@swc/core'
       - debug
 
-  '@nrwl/vite@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))':
+  '@nrwl/vite@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)':
     dependencies:
-      '@nx/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))
+      '@nx/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -10365,9 +10377,9 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/vite@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))':
+  '@nx/vite@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)':
     dependencies:
-      '@nrwl/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))
+      '@nrwl/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)
       '@nx/devkit': 19.4.2(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))
       '@nx/js': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.4.5)
@@ -11206,7 +11218,7 @@ snapshots:
       minimatch: 7.4.6
       semver: 7.6.0
 
-  '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))':
+  '@vitest/coverage-v8@1.6.0(vitest@1.6.0)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -15871,12 +15883,12 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
-  qwik-nx@2.3.0(6rocepx3yltcemdfak7x4h4way):
+  qwik-nx@2.3.0(yfeuwrzyzw4p6vciz27cdhykpq):
     dependencies:
       '@nx/devkit': 19.4.2(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))
       '@nx/eslint': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(verdaccio@5.31.0(typanion@3.14.0))
       '@nx/js': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))
-      '@nx/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.4))
+      '@nx/vite': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.1(@swc/core@1.5.24(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.4.5))(@swc/core@1.5.24(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4))(vitest@1.6.0)
 
   qwik-themes@0.2.0: {}
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e29e0cde3..ac751ce1e 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -19,6 +19,7 @@
       "@qwik-ui/styled": ["packages/kit-styled/src/index.ts"],
       "@qwik-ui/utils": ["packages/utils/src/index.ts"],
       "@qwik-ui/themes": ["packages/themes/src/index.ts"],
+      "@qwik-ui/extract-theme": ["packages/extract-theme/src/index.ts"],
       "~/*": ["apps/website/src/*"]
     }
   },