diff --git a/nx-dev/data-access-documents/.babelrc b/nx-dev/data-access-documents/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/data-access-documents/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/data-access-packages/.babelrc b/nx-dev/data-access-packages/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/data-access-packages/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/feature-analytics/.babelrc b/nx-dev/feature-analytics/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/feature-analytics/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/feature-doc-viewer/.babelrc b/nx-dev/feature-doc-viewer/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/feature-doc-viewer/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/feature-search/.babelrc b/nx-dev/feature-search/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/feature-search/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-common/.babelrc b/nx-dev/ui-common/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-common/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-common/src/lib/button.tsx b/nx-dev/ui-common/src/lib/button.tsx
index e9a30b52f4..98d977b833 100644
--- a/nx-dev/ui-common/src/lib/button.tsx
+++ b/nx-dev/ui-common/src/lib/button.tsx
@@ -1,5 +1,5 @@
-import cx from 'classnames';
 import Link from 'next/link';
+import { cx } from 'nx-dev/ui-primitives';
 import {
   AnchorHTMLAttributes,
   ForwardedRef,
diff --git a/nx-dev/ui-conference/.babelrc b/nx-dev/ui-conference/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-conference/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-member-card/.babelrc b/nx-dev/ui-member-card/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-member-card/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-primitives/.babelrc b/nx-dev/ui-primitives/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-primitives/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-primitives/.eslintrc.json b/nx-dev/ui-primitives/.eslintrc.json
new file mode 100644
index 0000000000..734ddaceea
--- /dev/null
+++ b/nx-dev/ui-primitives/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/nx-dev/ui-primitives/README.md b/nx-dev/ui-primitives/README.md
new file mode 100644
index 0000000000..89343f070f
--- /dev/null
+++ b/nx-dev/ui-primitives/README.md
@@ -0,0 +1,7 @@
+# nx-dev-ui-primitives
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nx-dev-ui-primitives` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/nx-dev/ui-primitives/project.json b/nx-dev/ui-primitives/project.json
new file mode 100644
index 0000000000..838716bda6
--- /dev/null
+++ b/nx-dev/ui-primitives/project.json
@@ -0,0 +1,16 @@
+{
+  "name": "nx-dev-ui-primitives",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-primitives/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["nx-dev/ui-primitives/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  }
+}
diff --git a/nx-dev/ui-primitives/src/index.ts b/nx-dev/ui-primitives/src/index.ts
new file mode 100644
index 0000000000..bee7c9d540
--- /dev/null
+++ b/nx-dev/ui-primitives/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/cx';
+export * from './lib/use-layout.effect';
diff --git a/nx-dev/ui-primitives/src/lib/cx.ts b/nx-dev/ui-primitives/src/lib/cx.ts
new file mode 100644
index 0000000000..35ccbb98bc
--- /dev/null
+++ b/nx-dev/ui-primitives/src/lib/cx.ts
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Small wrapper around classNames and twMerge
+ * It enables conditional and dynamic class usage,
+ * resolves duplications and conflicts for TailwindCSS
+ */
+export function cx(...inputs: classNames.ArgumentArray): string {
+  return twMerge(classNames(inputs));
+}
diff --git a/nx-dev/ui-primitives/src/lib/use-layout.effect.ts b/nx-dev/ui-primitives/src/lib/use-layout.effect.ts
new file mode 100644
index 0000000000..ada2deb390
--- /dev/null
+++ b/nx-dev/ui-primitives/src/lib/use-layout.effect.ts
@@ -0,0 +1,12 @@
+import { useLayoutEffect as ReactUseLayoutEffect } from 'react';
+
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+export const useLayoutEffect = (<any>globalThis)?.document
+  ? ReactUseLayoutEffect
+  : () => void 0;
diff --git a/nx-dev/ui-primitives/tsconfig.json b/nx-dev/ui-primitives/tsconfig.json
new file mode 100644
index 0000000000..95cfeb243d
--- /dev/null
+++ b/nx-dev/ui-primitives/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/nx-dev/ui-primitives/tsconfig.lib.json b/nx-dev/ui-primitives/tsconfig.lib.json
new file mode 100644
index 0000000000..ce8082f13b
--- /dev/null
+++ b/nx-dev/ui-primitives/tsconfig.lib.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/nx-dev/ui-sponsor-card/.babelrc b/nx-dev/ui-sponsor-card/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-sponsor-card/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/package.json b/package.json
index 32a8ee2acb..d9bb866728 100644
--- a/package.json
+++ b/package.json
@@ -302,6 +302,7 @@
     "send": "0.17.1",
     "string-width": "^4.2.3",
     "strong-log-transformer": "^2.1.0",
+    "tailwind-merge": "^1.8.1",
     "tailwindcss": "3.2.4",
     "tslib": "^2.3.0",
     "vitest": "^0.25.8",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index f42cd6d4b8..69fc5afe50 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -107,6 +107,7 @@
       "@nrwl/workspace/*": ["packages/workspace/*"],
       "@nrwl/workspace/testing": ["packages/workspace/testing"],
       "nx": ["packages/nx"],
+      "nx-dev/ui-primitives": ["nx-dev/ui-primitives/src/index.ts"],
       "nx/*": ["packages/nx/*"]
     }
   }
diff --git a/yarn.lock b/yarn.lock
index 7e7d183045..0b5f0b2403 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23007,6 +23007,11 @@ synckit@^0.8.4:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.4.0"
 
+tailwind-merge@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.8.1.tgz#0e56c8afbab2491f72e06381043ffec8b720ba04"
+  integrity sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==
+
 tailwindcss@3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"