From e159134e1512d2f4e7655333532a8058ac9b0b97 Mon Sep 17 00:00:00 2001
From: Reza Rahman <13340707+rezrah@users.noreply.github.com>
Date: Sun, 15 Mar 2026 20:58:44 +1100
Subject: [PATCH] add use client directive to package entrypoints

---
 .changeset/sunny-sails-invite.md              |  7 +++++++
 .../fixtures/KitchenSink.tsx                  |  1 +
 .../e2e/integration-tests/nextjs/page.tsx     |  1 -
 packages/react/src/index.ts                   |  2 ++
 packages/react/webpack.config.js              | 19 +++++++++++++++++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sunny-sails-invite.md

diff --git a/.changeset/sunny-sails-invite.md b/.changeset/sunny-sails-invite.md
new file mode 100644
index 0000000000..69e1fca62a
--- /dev/null
+++ b/.changeset/sunny-sails-invite.md
@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `'use client'` directive to the `@primer/react-brand` entrypoints to support React Server Components.
+
+Primer Brand components can now be imported into RSC-enabled frameworks like Next.js without manually adding `'use client'` to your files.
diff --git a/packages/e2e/integration-tests/fixtures/KitchenSink.tsx b/packages/e2e/integration-tests/fixtures/KitchenSink.tsx
index fda08f9a6f..0600083e91 100644
--- a/packages/e2e/integration-tests/fixtures/KitchenSink.tsx
+++ b/packages/e2e/integration-tests/fixtures/KitchenSink.tsx
@@ -1,3 +1,4 @@
+'use client'
 import {useRef} from 'react'
 import {
   Hero,
diff --git a/packages/e2e/integration-tests/nextjs/page.tsx b/packages/e2e/integration-tests/nextjs/page.tsx
index 3e2dfd627a..36970fe1cb 100644
--- a/packages/e2e/integration-tests/nextjs/page.tsx
+++ b/packages/e2e/integration-tests/nextjs/page.tsx
@@ -1,4 +1,3 @@
-'use client'
 /*eslint-disable */
 import TestFixture from '../integration-tests/fixtures/KitchenSink'
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 99b30fec72..1f2b1050ae 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,3 +1,5 @@
+'use client'
+
 export * from './css/stylesheets'
 
 export * from './Hero'
diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js
index 0ccbc762f0..5374b52370 100644
--- a/packages/react/webpack.config.js
+++ b/packages/react/webpack.config.js
@@ -2,6 +2,7 @@ const {name: libraryName} = require('./package')
 const path = require('path')
 const postcssPresetEnv = require('postcss-preset-env')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const {sources, Compilation} = require('webpack')
 
 module.exports = {
   entry: './src/index.ts',
@@ -126,5 +127,23 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: './css/[name].css',
     }),
+    // This is a custom plugin that preserves the 'use client' directive needed for RSC
+    // Do not remove it.
+    // Note: The UMD bundle (generated through this webpack config) doesn't preserve source 1:1.
+    //       This is why we need to restore it using a plugin. This isn't needed with ESM, but needed for UMD.
+    {
+      apply(compiler) {
+        compiler.hooks.thisCompilation.tap('UseClientDirectivePlugin', compilation => {
+          compilation.hooks.processAssets.tap(
+            {name: 'UseClientDirectivePlugin', stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE}, // must run after terser
+            assets => {
+              if (assets['index.js']) {
+                compilation.updateAsset('index.js', new sources.ConcatSource("'use client';\n", assets['index.js']))
+              }
+            },
+          )
+        })
+      },
+    },
   ],
 }