diff --git a/.changeset/compiled-vanilla-initial.md b/.changeset/compiled-vanilla-initial.md
new file mode 100644
index 0000000000..544949e348
--- /dev/null
+++ b/.changeset/compiled-vanilla-initial.md
@@ -0,0 +1,37 @@
+---
+'@compiled/vanilla': minor
+'@compiled/babel-plugin': minor
+'@compiled/babel-plugin-strip-runtime': minor
+'@compiled/utils': minor
+'@compiled/react': minor
+---
+
+`@compiled/react/runtime` now also exports `insertRule`, the bucket-ordered
+style insertion helper. This was previously only reachable via the deep
+private path `@compiled/react/runtime/sheet`. Promoting it to the public
+runtime entry lets framework-agnostic packages (`@compiled/vanilla`) reuse
+the same insertion logic so vanilla- and React-emitted rules cohabit the
+same `<style>` buckets in `document.head`.
+
+---
+
+Add `@compiled/vanilla`, a framework-agnostic compile-time CSS-in-JS API for
+non-React code paths (e.g. ProseMirror node views, plain DOM utilities).
+
+The new package exposes a minimal surface — `cssMap` and `ax` — and is wired
+through the existing Babel plugin via a new `state.isVanilla` code path:
+
+- A new `COMPILED_VANILLA_IMPORT = '@compiled/vanilla'` constant in
+  `@compiled/utils` is added to `DEFAULT_IMPORT_SOURCES`.
+- `@compiled/babel-plugin` detects the import source, omits the React /
+  `forwardRef` imports, switches the runtime entry to
+  `@compiled/vanilla/runtime`, and emits an `insertSheets([...])` call after
+  every transformed `cssMap` so the generated atomic sheets are inserted into
+  the document head at module-load time.
+- `@compiled/babel-plugin-strip-runtime` recognises and removes
+  `insertSheets(...)` calls during extraction, hoisting their string-literal
+  rules into the same `styleRules` collection used by `<CC><CS>` so the
+  existing `.compiled.css` extraction pipeline applies unchanged. The name
+  intentionally avoids `injectGlobal` to leave that name available for a
+  future API that injects genuinely unscoped global CSS, matching the
+  ecosystem-wide meaning of `injectGlobal` in Emotion / styled-components.
diff --git a/packages/babel-plugin-strip-runtime/src/__tests__/extract-styles.test.ts b/packages/babel-plugin-strip-runtime/src/__tests__/extract-styles.test.ts
index 4197187a6d..35aa1e857f 100644
--- a/packages/babel-plugin-strip-runtime/src/__tests__/extract-styles.test.ts
+++ b/packages/babel-plugin-strip-runtime/src/__tests__/extract-styles.test.ts
@@ -162,4 +162,120 @@ describe('babel-plugin-strip-runtime with stylesheet extraction (extractStylesTo
       });
     });
   });
+
+  describe('with @compiled/vanilla', () => {
+    // Vanilla input has no JSX, so the JSX runtime choice (classic vs.
+    // automatic) doesn't change the emitted output. We use the modern
+    // automatic runtime because it's the default for new code.
+    const runtime = 'automatic';
+
+    it('extracts cssMap styles and merges variants with ax — realistic ProseMirror-style use', () => {
+      // Simulates a typical non-React consumer (e.g. a ProseMirror node
+      // view's `toDOM` helper): declare a style map with a base variant
+      // plus a couple of conditional variants, then merge selected
+      // variants together with `ax` to compute the final className.
+      const code = `
+        import { cssMap, ax } from '@compiled/vanilla';
+
+        const styles = cssMap({
+          base: {
+            display: 'inline-block',
+            paddingInline: 8,
+            color: 'currentColor',
+          },
+          primary: {
+            color: 'white',
+            backgroundColor: 'blue',
+          },
+          danger: {
+            color: 'white',
+            backgroundColor: 'red',
+          },
+        });
+
+        export function buildBadgeClassName(variant) {
+          return ax([
+            styles.base,
+            variant === 'primary' && styles.primary,
+            variant === 'danger' && styles.danger,
+          ]);
+        }
+      `;
+
+      const actual = transform(code, {
+        run: 'both',
+        runtime,
+        extractStylesToDirectory: { source: 'src/', dest: 'dist/' },
+      });
+
+      // Bundle output expectations:
+      //
+      // - The className map is a plain object literal. Each variant's value
+      //   is the *space-separated atomic className* the user will compose
+      //   via `ax([...])` at runtime — this is the contract between
+      //   `cssMap` and `ax`.
+      //
+      // - The sibling `import './app.compiled.css'` is the sentinel the
+      //   bundler picks up (via the `sideEffects: ['**/*.compiled.css']`
+      //   package convention) to serve the extracted styles.
+      //
+      // - The user's original `import { cssMap, ax } from '@compiled/vanilla'`
+      //   is fully consumed: `cssMap` was rewritten to a plain object literal,
+      //   and `ax` was rewritten to come from `@compiled/vanilla/runtime`.
+      //   The `@compiled/vanilla` package entry never appears in the bundle.
+      //
+      // - `insertSheets` is gone (extracted), as is any React import.
+      expect(actual).toMatchInlineSnapshot(`
+        "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
+        import './app.compiled.css';
+        import { ax } from '@compiled/vanilla/runtime';
+        const styles = {
+          base: '_18zrftgi _1e0c1o8l _syaz1r31',
+          primary: '_syaz1x77 _bfhk13q2',
+          danger: '_syaz1x77 _bfhk5scu',
+        };
+        export function buildBadgeClassName(variant) {
+          return ax([
+            styles.base,
+            variant === 'primary' && styles.primary,
+            variant === 'danger' && styles.danger,
+          ]);
+        }
+        "
+      `);
+
+      // Extracted stylesheet expectations:
+      //
+      // The CSS file written to `dist/app.compiled.css` must contain one
+      // atomic rule per declaration in the source `cssMap`, with the same
+      // hash class names that appear in the JS bundle's className map
+      // above. That coupling is what makes `ax([styles.base])` resolve to
+      // a real visual style at runtime.
+      //
+      // - `paddingInline: 8` is emitted as a single `padding-inline:8px`
+      //   rule. Compiled does not split logical-property shorthands into
+      //   physical pairs because all evergreen browsers support
+      //   `padding-inline` natively.
+      //
+      // - `color: 'white'` is shared between the `primary` and `danger`
+      //   variants and dedupes to a single atomic rule (`_syaz1x77`) that
+      //   both className strings reference. This is the byte-saving win
+      //   atomic CSS exists to deliver.
+      //
+      // - Rule order in the extracted file follows the bucket-sorted order
+      //   produced by the CSS pipeline (`sort-atomic-style-sheet.ts`),
+      //   not the source-code order of the input `cssMap`.
+      expect(writeFileSync).toHaveBeenLastCalledWith(
+        expect.stringContaining('app.compiled.css'),
+        [
+          '._18zrftgi{padding-inline:8px}',
+          '._1e0c1o8l{display:inline-block}',
+          '._bfhk13q2{background-color:blue}',
+          '._bfhk5scu{background-color:red}',
+          '._syaz1r31{color:currentColor}',
+          '._syaz1x77{color:white}',
+        ].join('\n')
+      );
+    });
+  });
 });
diff --git a/packages/babel-plugin-strip-runtime/src/index.ts b/packages/babel-plugin-strip-runtime/src/index.ts
index e850608bb7..229d225be8 100644
--- a/packages/babel-plugin-strip-runtime/src/index.ts
+++ b/packages/babel-plugin-strip-runtime/src/index.ts
@@ -104,7 +104,15 @@ export default declare<PluginPass>((api) => {
       },
 
       ImportSpecifier(path) {
-        if (t.isIdentifier(path.node.imported) && ['CC', 'CS'].includes(path.node.imported.name)) {
+        // Strip both the React-mode style components (`CC`, `CS`) and the
+        // vanilla-mode style inserter (`insertSheets`). After extraction
+        // these imports are dead code: their effect has been moved to a
+        // sibling `.compiled.css` file (or to `pass.styleRules` for SSR
+        // consumers).
+        if (
+          t.isIdentifier(path.node.imported) &&
+          ['CC', 'CS', 'insertSheets'].includes(path.node.imported.name)
+        ) {
           path.remove();
         }
       },
@@ -139,6 +147,32 @@ export default declare<PluginPass>((api) => {
 
       CallExpression(path, pass) {
         const callee = path.node.callee;
+
+        // Vanilla mode: hoist the rules out of `insertSheets([...])` into
+        // `pass.styleRules` (so they participate in extraction the same way as
+        // rules from `<CC><CS>`), then remove the call entirely.
+        if (
+          t.isIdentifier(callee) &&
+          callee.name === 'insertSheets' &&
+          path.node.arguments.length === 1 &&
+          t.isArrayExpression(path.node.arguments[0])
+        ) {
+          const sheets: string[] = [];
+          for (const element of path.node.arguments[0].elements) {
+            if (!t.isStringLiteral(element)) {
+              // Bail out — leave the call alone if the argument isn't a
+              // statically extractable string array. This keeps the runtime
+              // behaviour correct in the rare cases where an unrelated
+              // function happens to share the name `insertSheets`.
+              return;
+            }
+            sheets.push(element.value);
+          }
+          pass.styleRules.push(...sheets);
+          path.remove();
+          return;
+        }
+
         if (isCreateElement(callee)) {
           // We've found something that looks like React.createElement(...)
           // Now we want to check if it's from the Compiled Runtime and if it is - replace with its children.
diff --git a/packages/babel-plugin/src/__tests__/vanilla.test.ts b/packages/babel-plugin/src/__tests__/vanilla.test.ts
new file mode 100644
index 0000000000..16e830aa8c
--- /dev/null
+++ b/packages/babel-plugin/src/__tests__/vanilla.test.ts
@@ -0,0 +1,194 @@
+import { transform } from '../test-utils';
+
+describe('@compiled/vanilla support in @compiled/babel-plugin', () => {
+  it('transforms a cssMap call from @compiled/vanilla into a className map', () => {
+    const actual = transform(
+      `
+        import { cssMap } from '@compiled/vanilla';
+
+        const styles = cssMap({
+          base: { color: 'red' },
+          accent: { color: 'blue' },
+        });
+      `,
+      { importReact: false }
+    );
+
+    // Result is a plain className-string map; no JSX wrapper.
+    expect(actual).toInclude('base:');
+    expect(actual).toInclude('accent:');
+    // Sheets are inserted via the vanilla runtime, not the React runtime.
+    expect(actual).toInclude('import { ax, insertSheets } from "@compiled/vanilla/runtime"');
+    expect(actual).toInclude('insertSheets(');
+  });
+
+  it('does not import React when only @compiled/vanilla is used', () => {
+    const actual = transform(
+      `
+        import { cssMap } from '@compiled/vanilla';
+
+        const styles = cssMap({
+          base: { color: 'red' },
+        });
+      `,
+      { importReact: false }
+    );
+
+    expect(actual).not.toInclude('from "react"');
+    expect(actual).not.toInclude('forwardRef');
+  });
+
+  it('does not import the React runtime when in vanilla mode', () => {
+    const actual = transform(
+      `
+        import { cssMap } from '@compiled/vanilla';
+
+        const styles = cssMap({
+          base: { color: 'red' },
+        });
+      `,
+      { importReact: false }
+    );
+
+    expect(actual).not.toInclude('@compiled/react/runtime');
+    expect(actual).not.toInclude(' CC ');
+    expect(actual).not.toInclude(' CS ');
+  });
+
+  it('passes each generated atomic sheet to insertSheets', () => {
+    const actual = transform(
+      `
+        import { cssMap } from '@compiled/vanilla';
+
+        const styles = cssMap({
+          base: { color: 'red', fontWeight: 'bold' },
+        });
+      `,
+      { importReact: false }
+    );
+
+    // Each declaration becomes its own atomic rule passed to insertSheets.
+    expect(actual).toInclude('color:red');
+    expect(actual).toInclude('font-weight:bold');
+    expect(actual).toInclude('insertSheets([');
+  });
+
+  it('does not enable vanilla mode for @compiled/react imports', () => {
+    const actual = transform(
+      `
+        import { cssMap } from '@compiled/react';
+
+        const styles = cssMap({
+          base: { color: 'red' },
+        });
+      `,
+      { importReact: false }
+    );
+
+    // React mode keeps the existing @compiled/react/runtime import and does
+    // not emit `insertSheets`.
+    expect(actual).toInclude('@compiled/react/runtime');
+    expect(actual).not.toInclude('insertSheets');
+    expect(actual).not.toInclude('@compiled/vanilla/runtime');
+  });
+
+  describe('ax', () => {
+    it('rewrites a standalone ax import from @compiled/vanilla to the runtime', () => {
+      // `ax` is a real runtime function (not a compile-time stub), so the
+      // user-level call site is preserved verbatim. However, the plugin
+      // rewrites the *import* from the package entry to the runtime entry
+      // so the bundle never references `@compiled/vanilla` directly — only
+      // `@compiled/vanilla/runtime`. This keeps the package entry purely
+      // build-time and ensures bundlers don't drag the stub package into
+      // production payloads.
+      //
+      // The plugin currently also includes `insertSheets` in the appended
+      // specifier list even when no `cssMap` was transformed. That extra
+      // specifier is a known minor cost — bundlers tree-shake it for
+      // production builds — and is acceptable for v1. A future optimisation
+      // could narrow the appended specifier set to only what was actually
+      // used by the file.
+      const actual = transform(
+        `
+          import { ax } from '@compiled/vanilla';
+
+          export const className = ax(['foo', 'bar']);
+        `,
+        { importReact: false }
+      );
+
+      // The user-level ax call is preserved verbatim.
+      expect(actual).toInclude('ax(["foo", "bar"])');
+      // The original `@compiled/vanilla` package import is removed; the
+      // runtime import is the sole source of `ax` in the bundle.
+      expect(actual).not.toInclude('from "@compiled/vanilla";');
+      expect(actual).toInclude('from "@compiled/vanilla/runtime"');
+      // Vanilla runtime is the canonical source for `ax`; the React runtime
+      // must never be pulled in for a vanilla-only file.
+      expect(actual).not.toInclude('@compiled/react/runtime');
+    });
+
+    it('exposes ax via the vanilla runtime when cssMap is also used', () => {
+      // When `cssMap` triggers the vanilla code path, the plugin appends a
+      // runtime import that includes both `ax` and `insertSheets` from
+      // `@compiled/vanilla/runtime`. This test guards against accidentally
+      // dropping `ax` from the appended specifier list.
+      const actual = transform(
+        `
+          import { cssMap, ax } from '@compiled/vanilla';
+
+          const styles = cssMap({
+            base: { color: 'red' },
+            accent: { color: 'blue' },
+          });
+
+          export const className = ax([styles.base, styles.accent]);
+        `,
+        { importReact: false }
+      );
+
+      expect(actual).toInclude('import { ax, insertSheets } from "@compiled/vanilla/runtime"');
+      expect(actual).toInclude('insertSheets([');
+      // The user-level ax call is preserved verbatim and resolves against
+      // the appended runtime import.
+      expect(actual).toInclude('ax([styles.base, styles.accent])');
+    });
+
+    it('uses the vanilla runtime ax — never the React runtime ax', () => {
+      // Regression guard: even when only the vanilla `cssMap` triggered the
+      // append, the runtime module must be `@compiled/vanilla/runtime`, never
+      // `@compiled/react/runtime`. Mixing the two would cause two copies of
+      // `ax` to ship and would defeat dedup across vanilla and React rules.
+      const actual = transform(
+        `
+          import { cssMap, ax } from '@compiled/vanilla';
+
+          const styles = cssMap({ base: { color: 'red' } });
+
+          export const className = ax([styles.base]);
+        `,
+        { importReact: false }
+      );
+
+      expect(actual).toInclude('@compiled/vanilla/runtime');
+      expect(actual).not.toInclude('@compiled/react/runtime');
+    });
+
+    it('does not import React even when ax is used standalone', () => {
+      // Vanilla mode is React-free regardless of which APIs are used. A
+      // standalone `ax` import from `@compiled/vanilla` should never cause
+      // an `import * as React from "react"` to be injected.
+      const actual = transform(
+        `
+          import { ax } from '@compiled/vanilla';
+
+          export const className = ax(['_a', '_b']);
+        `,
+        { importReact: false }
+      );
+
+      expect(actual).not.toInclude('from "react"');
+      expect(actual).not.toInclude('forwardRef');
+    });
+  });
+});
diff --git a/packages/babel-plugin/src/babel-plugin.ts b/packages/babel-plugin/src/babel-plugin.ts
index 89d03245bc..a38ced3ccc 100644
--- a/packages/babel-plugin/src/babel-plugin.ts
+++ b/packages/babel-plugin/src/babel-plugin.ts
@@ -11,6 +11,7 @@ import {
   JSX_ANNOTATION_REGEX,
   DEFAULT_IMPORT_SOURCES,
   COMPILED_IMPORT,
+  COMPILED_VANILLA_IMPORT,
 } from '@compiled/utils';
 
 import { visitClassNamesPath } from './class-names';
@@ -196,13 +197,25 @@ export default declare<State>((api) => {
 
           appendRuntimeImports(path, state);
 
-          if (!pragma.jsxImportSource && shouldImportReact && !path.scope.getBinding('React')) {
+          if (
+            !state.isVanilla &&
+            !pragma.jsxImportSource &&
+            shouldImportReact &&
+            !path.scope.getBinding('React')
+          ) {
             // React is missing - add it in at the last moment!
+            // Vanilla mode is framework-agnostic so we never inject React.
             path.unshiftContainer('body', template.ast(`import * as React from 'react'`));
           }
 
-          if (state.compiledImports?.styled && !path.scope.getBinding('forwardRef')) {
+          if (
+            !state.isVanilla &&
+            state.compiledImports?.styled &&
+            !path.scope.getBinding('forwardRef')
+          ) {
             // forwardRef is missing - add it in at the last moment!
+            // Vanilla mode does not support `styled` so this branch never fires
+            // for it, but the explicit guard documents the intent.
             path.unshiftContainer('body', template.ast(`import { forwardRef } from 'react'`));
           }
 
@@ -262,6 +275,15 @@ export default declare<State>((api) => {
           return;
         }
 
+        // Detect the framework-agnostic vanilla import source. In vanilla mode
+        // we change a handful of code-emission decisions later in the pass:
+        // sheets are inserted via `insertSheets` from
+        // `@compiled/vanilla/runtime`, no React or `forwardRef` import is
+        // added, and no `<CC><CS>` wrapper is generated.
+        if (userLandModule === COMPILED_VANILLA_IMPORT) {
+          state.isVanilla = true;
+        }
+
         // The presence of the module enables CSS prop
         state.compiledImports = state.compiledImports || {};
 
@@ -286,6 +308,23 @@ export default declare<State>((api) => {
               specifier.remove();
             }
           });
+
+          // Vanilla-mode only: remove the user's `ax` specifier from
+          // `@compiled/vanilla`. Unlike the React package (which does not
+          // re-export `ax` from its main entry), `@compiled/vanilla` *does*
+          // re-export `ax` for ergonomic single-import use. After the plugin
+          // runs we always append `import { ax, insertSheets } from
+          // '@compiled/vanilla/runtime'`, so leaving the original specifier
+          // in place produces a duplicate `ax` import. Removing it here keeps
+          // the user's `ax(...)` call site intact (it now resolves against
+          // the appended runtime import, which uses the same local name).
+          if (
+            state.isVanilla &&
+            t.isIdentifier(specifier.node?.imported) &&
+            specifier.node?.imported.name === 'ax'
+          ) {
+            specifier.remove();
+          }
         });
 
         if (path.node.specifiers.length === 0) {
diff --git a/packages/babel-plugin/src/css-map/index.ts b/packages/babel-plugin/src/css-map/index.ts
index 21dcff94a4..cd03d907d4 100644
--- a/packages/babel-plugin/src/css-map/index.ts
+++ b/packages/babel-plugin/src/css-map/index.ts
@@ -113,4 +113,26 @@ export const visitCssMapPath = (
 
   // We store sheets in the meta state so that we can use it later to generate Compiled component.
   meta.state.cssMap[path.parent.id.name] = totalSheets;
+
+  // Vanilla mode: there is no React component to host the sheets via
+  // `<CC><CS>`, so we emit an explicit `insertSheets([...])` call before the
+  // variable declaration holding the className map. The runtime helper inserts
+  // each rule into the document head exactly once.
+  //
+  // In production builds, `@compiled/babel-plugin-strip-runtime` removes this
+  // call entirely and writes the sheets to a sibling `.compiled.css` file
+  // (re-using the same extraction logic as `<CC><CS>`).
+  if (meta.state.isVanilla && totalSheets.length > 0) {
+    const declaration = meta.parentPath.findParent((parent) => parent.isVariableDeclaration());
+
+    if (declaration) {
+      declaration.insertBefore(
+        t.expressionStatement(
+          t.callExpression(t.identifier('insertSheets'), [
+            t.arrayExpression(totalSheets.map((sheet) => t.stringLiteral(sheet))),
+          ])
+        )
+      );
+    }
+  }
 };
diff --git a/packages/babel-plugin/src/types.ts b/packages/babel-plugin/src/types.ts
index 721983e5b1..41b15a50df 100644
--- a/packages/babel-plugin/src/types.ts
+++ b/packages/babel-plugin/src/types.ts
@@ -145,6 +145,16 @@ export interface State extends PluginPass {
     cssMap?: string[];
   };
 
+  /**
+   * `true` when the module imports from `@compiled/vanilla`.
+   *
+   * In vanilla mode the plugin emits framework-agnostic output: no React
+   * import, no `forwardRef`, no `<CC><CS>` style components. CSS sheets are
+   * inserted at module-load time via `insertSheets` from
+   * `@compiled/vanilla/runtime`.
+   */
+  isVanilla?: boolean;
+
   usesXcss?: boolean;
 
   importedCompiledImports?: {
diff --git a/packages/babel-plugin/src/utils/append-runtime-imports.ts b/packages/babel-plugin/src/utils/append-runtime-imports.ts
index 28e7d39f27..1cbefd5e5d 100644
--- a/packages/babel-plugin/src/utils/append-runtime-imports.ts
+++ b/packages/babel-plugin/src/utils/append-runtime-imports.ts
@@ -20,15 +20,31 @@ const COMPILED_RUNTIME_IMPORTS_WITH_COMPRESSION = ['ac', 'ix', 'CC', 'CS'];
 const COMPILED_RUNTIME_IMPORTS_WITHOUT_COMPRESSION = ['ax', 'ix', 'CC', 'CS'];
 const COMPILED_RUNTIME_MODULE = '@compiled/react/runtime';
 
+// Vanilla mode is React-free: there is no JSX wrapper, so neither `CC` nor
+// `CS` is needed. `ix` is omitted because vanilla `cssMap` does not support
+// dynamic CSS variable interpolation today (the runtime helper for that lives
+// in `@compiled/react/runtime` and is JSX-shaped). When dynamic interpolation
+// is added to vanilla, `ix` should be re-introduced here.
+const COMPILED_VANILLA_RUNTIME_IMPORTS = ['ax', 'insertSheets'];
+const COMPILED_VANILLA_RUNTIME_MODULE = '@compiled/vanilla/runtime';
+
 /**
  * Appends runtime import to code. If it is already present, it will append import specifiers
  * to already imported declaration path else it will create fresh import declaration path
  * with runtime import specifiers.
  *
+ * In vanilla mode imports are sourced from `@compiled/vanilla/runtime` and the
+ * specifier set is reduced to `ax` (className merging) plus `insertSheets`
+ * (the helper that inserts the generated sheets into the document head).
+ *
  * @param path ImportDeclaration node path
  */
 export const appendRuntimeImports = (path: NodePath<t.Program>, state: State): void => {
-  const COMPILED_RUNTIME_IMPORTS = state.opts.classNameCompressionMap
+  const runtimeModule = state.isVanilla ? COMPILED_VANILLA_RUNTIME_MODULE : COMPILED_RUNTIME_MODULE;
+
+  const runtimeImports = state.isVanilla
+    ? COMPILED_VANILLA_RUNTIME_IMPORTS
+    : state.opts.classNameCompressionMap
     ? COMPILED_RUNTIME_IMPORTS_WITH_COMPRESSION
     : COMPILED_RUNTIME_IMPORTS_WITHOUT_COMPRESSION;
 
@@ -36,10 +52,7 @@ export const appendRuntimeImports = (path: NodePath<t.Program>, state: State): v
   const previouslyDeclaredRuntimeDeclaration = path
     .get('body')
     .find((childPath): childPath is NodePath<t.ImportDeclaration> => {
-      return (
-        t.isImportDeclaration(childPath.node) &&
-        childPath.node.source.value === COMPILED_RUNTIME_MODULE
-      );
+      return t.isImportDeclaration(childPath.node) && childPath.node.source.value === runtimeModule;
     });
 
   if (previouslyDeclaredRuntimeDeclaration) {
@@ -54,7 +67,7 @@ export const appendRuntimeImports = (path: NodePath<t.Program>, state: State): v
       .get('specifiers')
       .map((specifier) => specifier.node.local.name);
 
-    COMPILED_RUNTIME_IMPORTS.forEach((runtimeImportName) => {
+    runtimeImports.forEach((runtimeImportName) => {
       // Avoids duplicate imports from being appended if already present
       if (!localImportNames.includes(runtimeImportName)) {
         previouslyDeclaredRuntimeDeclaration.pushContainer(
@@ -68,8 +81,8 @@ export const appendRuntimeImports = (path: NodePath<t.Program>, state: State): v
     path.unshiftContainer(
       'body',
       t.importDeclaration(
-        COMPILED_RUNTIME_IMPORTS.map((runtimeImportName) => importSpecifier(runtimeImportName)),
-        t.stringLiteral(COMPILED_RUNTIME_MODULE)
+        runtimeImports.map((runtimeImportName) => importSpecifier(runtimeImportName)),
+        t.stringLiteral(runtimeModule)
       )
     );
   }
diff --git a/packages/react/src/runtime.ts b/packages/react/src/runtime.ts
index 532e5cfb1a..20e3fac2ea 100644
--- a/packages/react/src/runtime.ts
+++ b/packages/react/src/runtime.ts
@@ -1 +1,8 @@
 export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index.js';
+// `insertRule` is exposed so framework-agnostic packages (currently only
+// `@compiled/vanilla`) can reuse the bucket-ordered insertion logic without
+// reaching into private `@compiled/react/runtime/sheet` paths. Sharing the
+// helper means vanilla- and React-emitted rules cohabit the same `<style>`
+// buckets in `document.head`, preserving the cascade ordering Compiled
+// guarantees across both modes.
+export { default as insertRule } from './runtime/sheet.js';
diff --git a/packages/utils/src/constants.ts b/packages/utils/src/constants.ts
index 63251ffd7b..497c315d51 100644
--- a/packages/utils/src/constants.ts
+++ b/packages/utils/src/constants.ts
@@ -4,8 +4,14 @@
  */
 export const COMPILED_IMPORT = '@compiled/react';
 
+/**
+ * The package providing Compiled's framework-agnostic ("vanilla") API.
+ * Used by code paths that produce className strings without React.
+ */
+export const COMPILED_VANILLA_IMPORT = '@compiled/vanilla';
+
 /**
  * A list of first-class packages we treat as valid import sources for Compiled.
  * Eg. for the `jsx` pragma, for `css` function, etc.
  */
-export const DEFAULT_IMPORT_SOURCES = [COMPILED_IMPORT, '@atlaskit/css'];
+export const DEFAULT_IMPORT_SOURCES = [COMPILED_IMPORT, '@atlaskit/css', COMPILED_VANILLA_IMPORT];
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index a78767ca0b..f43b538de5 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -8,4 +8,4 @@ export { preserveLeadingComments } from './preserve-leading-comments';
 export { INCREASE_SPECIFICITY_SELECTOR } from './increase-specificity';
 export { DEFAULT_PARSER_BABEL_PLUGINS } from './default-parser-babel-plugins';
 export { shorthandBuckets, shorthandFor, type ShorthandProperties, type Depths } from './shorthand';
-export { COMPILED_IMPORT, DEFAULT_IMPORT_SOURCES } from './constants';
+export { COMPILED_IMPORT, COMPILED_VANILLA_IMPORT, DEFAULT_IMPORT_SOURCES } from './constants';
diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md
new file mode 100644
index 0000000000..d6d6be6212
--- /dev/null
+++ b/packages/vanilla/README.md
@@ -0,0 +1,39 @@
+# @compiled/vanilla
+
+A framework-agnostic compile-time CSS-in-JS API for [Compiled](https://compiledcssinjs.com).
+
+`@compiled/vanilla` is intended for codebases (or parts of codebases) that need
+to generate class-name strings at build time **without taking a React
+dependency**. Common consumers are ProseMirror `toDOM` helpers, plain DOM
+utilities, and other framework-agnostic style sites in apps that already use
+`@compiled/react` elsewhere.
+
+## Quick start
+
+```ts
+import { cssMap, ax } from '@compiled/vanilla';
+
+const styles = cssMap({
+  base: { color: 'red', fontWeight: 'bold' },
+  hover: { '&:hover': { color: 'darkred' } },
+});
+
+// Use the className strings directly on a DOM element.
+element.className = ax([styles.base, styles.hover]);
+```
+
+At build time the Compiled Babel plugin sees the import from
+`@compiled/vanilla`, transforms the `cssMap` call into atomic class names, and
+emits an `insertSheets(...)` call that inserts the generated rules into the
+document head when the module is loaded.
+
+## Differences from `@compiled/react`
+
+| Concern          | `@compiled/react`                                                 | `@compiled/vanilla`                                             |
+| ---------------- | ----------------------------------------------------------------- | --------------------------------------------------------------- |
+| React dependency | Required                                                          | None                                                            |
+| Style injection  | Via `<CC><CS>` JSX components rendered by React                   | Via runtime `insertSheets` call inserted automatically by Babel |
+| Surface area     | `styled`, `css`, `cssMap`, `keyframes`, `ClassNames`, `xcss`, ... | `cssMap` + `ax`                                                 |
+| Use case         | React components                                                  | Non-React code (ProseMirror, plain DOM, etc.)                   |
+
+If you are writing a React component, prefer `@compiled/react`.
diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
new file mode 100644
index 0000000000..53d74af9f8
--- /dev/null
+++ b/packages/vanilla/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@compiled/vanilla",
+  "version": "0.1.0",
+  "description": "Framework-agnostic compile time CSS-in-JS API for Compiled. Use this in non-React code (e.g. ProseMirror node views, plain DOM utilities) where you need a class-name string but don't want to pull in React.",
+  "keywords": [
+    "compiled",
+    "css-in-js",
+    "vanilla",
+    "typescript"
+  ],
+  "homepage": "https://compiledcssinjs.com",
+  "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian-labs/compiled.git",
+    "directory": "packages/vanilla"
+  },
+  "license": "Apache-2.0",
+  "author": "Atlassian",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": [
+        "./dist/esm/index.js",
+        "./src/index.ts"
+      ],
+      "require": [
+        "./dist/cjs/index.js",
+        "./src/index.ts"
+      ]
+    },
+    "./runtime": {
+      "import": [
+        "./dist/esm/runtime.js",
+        "./src/runtime.ts"
+      ],
+      "require": [
+        "./dist/cjs/runtime.js",
+        "./src/runtime.ts"
+      ]
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "browser": "./dist/browser/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "runtime"
+  ],
+  "dependencies": {
+    "@compiled/react": "^0.21.0",
+    "csstype": "^3.2.3"
+  }
+}
diff --git a/packages/vanilla/src/css-map/index.ts b/packages/vanilla/src/css-map/index.ts
new file mode 100644
index 0000000000..e4dffdcc27
--- /dev/null
+++ b/packages/vanilla/src/css-map/index.ts
@@ -0,0 +1,40 @@
+import type { CssObject } from '../types';
+import { createSetupError } from '../utils/error';
+
+/**
+ * Build-time stub for the vanilla `cssMap` API.
+ *
+ * At build time the Compiled Babel plugin replaces calls to this function with
+ * a plain object whose values are the generated atomic class-name strings, and
+ * inserts an `insertSheets(...)` call so the corresponding rules are added to
+ * the document head when the module is loaded.
+ *
+ * If you are seeing this error at runtime, the Babel plugin (or Atlaspack
+ * transformer) is not running on the file that called `cssMap`.
+ *
+ * ```ts
+ * import { cssMap } from '@compiled/vanilla';
+ *
+ * const styles = cssMap({
+ *   base: { color: 'red' },
+ *   hover: { '&:hover': { color: 'darkred' } },
+ * });
+ *
+ * element.className = styles.base;
+ * ```
+ *
+ * The input is a record of variant names to nested CSS objects. Each variant
+ * resolves to a className string at build time (composed of the atomic classes
+ * needed to apply the variant's declarations). Unlike `@compiled/react`'s
+ * `cssMap`, the values in the returned object are plain `string`s — there is
+ * no `CompiledStyles<...>` brand because vanilla output is intended for direct
+ * assignment to a DOM element's `className`.
+ *
+ * @typeParam TStyles - A record whose keys become the variant names and whose
+ *   values are nested {@link CssObject} declarations.
+ */
+export default function cssMap<TStyles extends Record<string, CssObject>>(
+  _styles: TStyles
+): { readonly [P in keyof TStyles]: string } {
+  throw createSetupError();
+}
diff --git a/packages/vanilla/src/index.ts b/packages/vanilla/src/index.ts
new file mode 100644
index 0000000000..afee97197d
--- /dev/null
+++ b/packages/vanilla/src/index.ts
@@ -0,0 +1,17 @@
+/**
+ * `@compiled/vanilla` — framework-agnostic compile-time CSS-in-JS for Compiled.
+ *
+ * This package exposes a small surface intended for non-React code paths:
+ * - {@link cssMap} for declaring style maps that resolve to className strings
+ * - {@link ax} for merging className strings with last-wins atomic dedup
+ *
+ * All other transformations (`<CC>` / `<CS>` injection, JSX runtime, the css
+ * prop, `styled`, etc.) live in `@compiled/react` and are React-specific.
+ */
+export { default as cssMap } from './css-map/index';
+export { ax } from './runtime';
+
+// Re-export the type primitives so consumers writing helper utilities (e.g.
+// "build a style object then pass it to cssMap") have access to the same
+// types the public API uses, without reaching into private subpaths.
+export type { CssFunction, CssObject, CSSProps, CssType } from './types';
diff --git a/packages/vanilla/src/runtime.ts b/packages/vanilla/src/runtime.ts
new file mode 100644
index 0000000000..f452216b09
--- /dev/null
+++ b/packages/vanilla/src/runtime.ts
@@ -0,0 +1,13 @@
+/**
+ * Runtime entry for `@compiled/vanilla`.
+ *
+ * - `ax` is re-exported from `@compiled/react/runtime` so vanilla and React
+ *   consumers share a single, deduplicated implementation.
+ * - `insertSheets` is the helper emitted by the Babel plugin after a vanilla
+ *   `cssMap` call: it inserts the generated atomic CSS rules into the
+ *   document head exactly once per rule, regardless of how many times the
+ *   module is evaluated. The name avoids `injectGlobal`, which has an
+ *   established "unscoped global CSS" meaning elsewhere in the ecosystem.
+ */
+export { ax } from '@compiled/react/runtime';
+export { default as insertSheets } from './runtime/insert-sheets';
diff --git a/packages/vanilla/src/runtime/insert-sheets.ts b/packages/vanilla/src/runtime/insert-sheets.ts
new file mode 100644
index 0000000000..2d69ed1aa8
--- /dev/null
+++ b/packages/vanilla/src/runtime/insert-sheets.ts
@@ -0,0 +1,64 @@
+import { insertRule } from '@compiled/react/runtime';
+
+/**
+ * Module-scoped cache of CSS rules already inserted by this runtime.
+ *
+ * We dedupe by exact rule string so that re-evaluating a module (e.g. during
+ * HMR or in environments with module duplication) does not insert the same
+ * rule twice. The underlying `insertRule` already has its own bucket-level
+ * dedup for the production path, but a string-set cache short-circuits even
+ * the cheap work — and keeps semantics identical between dev and prod.
+ */
+const inserted = new Set<string>();
+
+/**
+ * Insert each atomic CSS rule in `sheets` into the document head, exactly
+ * once per unique rule. No-op outside a browser environment.
+ *
+ * Note: despite the name, the rules passed to this function are *not* global
+ * unscoped CSS — they are the same atomic, hash-scoped rules Compiled emits
+ * elsewhere via `<CC><CS>`. The function exists because vanilla mode has no
+ * React render pass to host those style components, so the rules must be
+ * inserted directly. Naming intentionally avoids `injectGlobal`, which has an
+ * established meaning of "unscoped global CSS" in the wider CSS-in-JS
+ * ecosystem.
+ *
+ * The Babel plugin emits a call to this function for every vanilla `cssMap`
+ * declaration it transforms:
+ *
+ * ```ts
+ * // Source
+ * const styles = cssMap({ base: { color: 'red' } });
+ *
+ * // Output
+ * import { insertSheets } from '@compiled/vanilla/runtime';
+ * insertSheets(['._abc1234{color:red}']);
+ * const styles = { base: '_abc1234' };
+ * ```
+ *
+ * @param sheets List of fully-formed atomic CSS rules to insert.
+ */
+export default function insertSheets(sheets: string[]): void {
+  if (typeof document === 'undefined') {
+    // Server / non-DOM environments: nothing to do. SSR style extraction is
+    // handled by `@compiled/babel-plugin-strip-runtime`, which removes
+    // `insertSheets(...)` calls entirely and writes their arguments to a
+    // sibling `.compiled.css` file.
+    return;
+  }
+
+  for (let i = 0; i < sheets.length; i++) {
+    const rule = sheets[i];
+    if (inserted.has(rule)) continue;
+    inserted.add(rule);
+    insertRule(rule, {});
+  }
+}
+
+/**
+ * Test-only helper to clear the deduplication cache. Not exported from the
+ * public runtime entry; intended for use by `@compiled/jest` and unit tests.
+ */
+export const clearInsertedCache = (): void => {
+  inserted.clear();
+};
diff --git a/packages/vanilla/src/types.ts b/packages/vanilla/src/types.ts
new file mode 100644
index 0000000000..c3a14a8648
--- /dev/null
+++ b/packages/vanilla/src/types.ts
@@ -0,0 +1,56 @@
+import type * as CSS from 'csstype';
+
+/**
+ * Local copy of the type primitives used by `cssMap`. These mirror the types
+ * in `@compiled/react/src/types.ts` but are intentionally duplicated here so
+ * `@compiled/vanilla` does not take a *type-level* dependency on React.
+ *
+ * Why duplicate instead of re-export?
+ * - The runtime dependency on `@compiled/react` is for `ax` and `insertRule`,
+ *   both of which are used by emitted code. Pulling type symbols across the
+ *   package boundary would force consumers to keep React's type definitions
+ *   in scope even for files that never see React.
+ * - Vanilla's `cssMap` returns `string` (a className), not the branded
+ *   `CompiledStyles<...>` React uses for its css-prop / xcss flow. Keeping
+ *   the input types local makes that distinction explicit.
+ *
+ * If these types ever drift from React's, the source of truth is
+ * `packages/react/src/types.ts`. Keep the structural shape aligned so the
+ * Babel plugin can apply the same `buildCss` pipeline to both modes without
+ * special-casing.
+ */
+
+/**
+ * Possible types for a CSS value inside an object expression.
+ */
+export type CssType =
+  | CSSProps // Typed CSS properties
+  | CssObject // Nested CSS object (selectors, pseudo-classes, media)
+  | string; // Plain CSS string fragment (interpolated at build time)
+
+/**
+ * The set of CSS property declarations Compiled accepts as object keys.
+ * Values are the standard `csstype`-typed property values plus the things
+ * Compiled supports interpolating (numbers, strings, nested objects, etc.).
+ */
+export type CSSProps = Readonly<CSS.Properties<CssFunction>>;
+
+/**
+ * A nested CSS object. Keys are either CSS property names (e.g. `color`),
+ * pseudo-class / pseudo-element selectors (e.g. `&:hover`), at-rule strings
+ * (e.g. `@media (min-width: 600px)`), or plain selector strings.
+ */
+export type CssObject = Readonly<{
+  [key: string]: CssFunction;
+}>;
+
+/**
+ * The full set of values Compiled can statically evaluate as CSS at build
+ * time. Mirrors `CssFunction` from `@compiled/react/types`.
+ */
+export type CssFunction =
+  | CssType
+  | number // Bare numeric values (e.g. `padding: 8`)
+  | null
+  | boolean // Allows short-circuit patterns like `condition && styles`
+  | undefined;
diff --git a/packages/vanilla/src/utils/error.ts b/packages/vanilla/src/utils/error.ts
new file mode 100644
index 0000000000..14d2abf55f
--- /dev/null
+++ b/packages/vanilla/src/utils/error.ts
@@ -0,0 +1,10 @@
+/**
+ * Throws a setup error explaining that `@compiled/vanilla` is being used at
+ * runtime — which means the Compiled Babel plugin did not transform the call
+ * site. The functions in this package are compile-time stubs and have no
+ * meaningful runtime behaviour.
+ */
+export const createSetupError = (): Error =>
+  new Error(
+    "@compiled/vanilla isn't set up correctly. Make sure the Compiled Babel plugin (or Atlaspack transformer) is configured to transform files using `@compiled/vanilla`. See https://compiledcssinjs.com for setup instructions."
+  );
diff --git a/packages/vanilla/tsconfig.browser.json b/packages/vanilla/tsconfig.browser.json
new file mode 100644
index 0000000000..125ca0f2df
--- /dev/null
+++ b/packages/vanilla/tsconfig.browser.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.options.json",
+  "compilerOptions": {
+    "outDir": "dist/browser",
+    "module": "es6",
+    "moduleResolution": "node",
+    "tsBuildInfoFile": "tsconfig.browser.tsbuildinfo"
+  },
+  "references": [{ "path": "../utils" }, { "path": "../react" }]
+}
diff --git a/packages/vanilla/tsconfig.cjs.json b/packages/vanilla/tsconfig.cjs.json
new file mode 100644
index 0000000000..aa58a8bcb1
--- /dev/null
+++ b/packages/vanilla/tsconfig.cjs.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.options.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "tsBuildInfoFile": "tsconfig.cjs.tsbuildinfo"
+  },
+  "references": [{ "path": "../utils" }, { "path": "../react" }]
+}
diff --git a/packages/vanilla/tsconfig.json b/packages/vanilla/tsconfig.json
new file mode 100644
index 0000000000..7e37462e7b
--- /dev/null
+++ b/packages/vanilla/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.options.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "module": "es6",
+    "moduleResolution": "node",
+    "tsBuildInfoFile": "tsconfig.esm.tsbuildinfo"
+  },
+  "references": [{ "path": "../utils" }, { "path": "../react" }]
+}
diff --git a/packages/vanilla/tsconfig.options.json b/packages/vanilla/tsconfig.options.json
new file mode 100644
index 0000000000..4a08464343
--- /dev/null
+++ b/packages/vanilla/tsconfig.options.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.options.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  }
+}