diff --git a/package.json b/package.json
index 8e084174..347f6d9d 100644
--- a/package.json
+++ b/package.json
@@ -175,6 +175,7 @@
     "./postcss/theme-dark": "./src/extra/theme-dark.css",
     "./postcss/theme-light": "./src/extra/theme-light.css",
     "./utilities": "./src/extra/utilities.css",
+    "./preset-unocss": "./src/presets/unocss/index.js",
     "./*": "./*"
   },
   "browserslist": [
diff --git a/src/presets/unocss/index.js b/src/presets/unocss/index.js
new file mode 100644
index 00000000..ead4e005
--- /dev/null
+++ b/src/presets/unocss/index.js
@@ -0,0 +1,30 @@
+import Colors from "../../../src/props.colors.js";
+import Fonts from "../../../src/props.fonts.js";
+
+export const openPropsPreset = {
+  name: "unocss-preset-open-props",
+  rules: [
+    [
+      /^op-color-(.*)$/,
+      ([, token], { theme }) => {
+        const normalizedVariable = `--${token}`;
+        if (theme["colors"][normalizedVariable]) {
+          return { color: theme["colors"][normalizedVariable] };
+        }
+      },
+    ],
+    [
+      /^op-font-(.*)$/,
+      ([, token], { theme }) => {
+        const normalizedVariable = `--font-${token}`;
+        if (theme["fontFamily"][normalizedVariable]) {
+          return { "font-family": theme["fontFamily"][normalizedVariable] };
+        }
+      },
+    ],
+  ],
+  theme: {
+    colors: Colors,
+    fontFamily: Fonts,
+  },
+};