Add RSC 'use client' directive to main package entrypoint

[rezrah]

Summary

Towards https://github.com/github/brand-experience/issues/80

Improves React Server Component (RSC) interop for modern UI frameworks like Next.js.

Previously, users importing library components would need to manually add the use client directive to all React pages/components that used Primer Brand. This caused friction and concern.

Now the library includes the relevant fixes to ensure that such user intervention is no longer required. The now include the required directives that enable smoother, frictionless interop. The approach taken is the same as other popular React UI component libraries, which pass through the directive at a library level.

Note

There is a separate RSC-specific error that appears for components that use the dot-notation, compound pattern API. These are not addressed in this PR and will require a separate update.

List of notable changes:

• Add use client directive to library entrypoints
• Coerce the bundler to preserve directives in final, compiled output
• Update our E2E integration tests to validate approach and confirm it works as expected

Steps to test:

1. Take the canary package from this PR (in checks)
2. Follow getting started guide here to install @primer/react-brand on a new Next.js installation
3. Observe that components now work out of the box, and no longer produce any errors.

Supporting resources (related issues, external links, etc):

• Primer Brand components & React Server Components #418

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: e159134

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[Copilot]

Pull request overview

This PR updates the @primer/react-brand build and test setup to better support React Server Components (RSC) consumers (e.g. Next.js App Router) by ensuring the published entry bundle is treated as a Client Component.

Changes:

• Add 'use client' to the package TypeScript entrypoint (packages/react/src/index.ts).
• Add a custom webpack plugin to prepend 'use client' to the emitted UMD bundle (packages/react/webpack.config.js).
• Adjust the Next.js e2e integration fixture/component boundary and add a changeset describing the behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/webpack.config.js	Prepends 'use client' to the generated UMD index.js to keep the directive at the top of the emitted asset.
packages/react/src/index.ts	Marks the public barrel entrypoint as a client module.
packages/e2e/integration-tests/nextjs/page.tsx	Removes 'use client' from the page to allow server-page → client-fixture composition.
packages/e2e/integration-tests/fixtures/KitchenSink.tsx	Adds 'use client' to the fixture component (it uses hooks).
.changeset/sunny-sails-invite.md	Release note for the RSC/client-entrypoint change.

---

You can also share your feedback on Copilot code review. Take the survey.

[danielguillan]

LGTM! 🚀