Publishing a reusable React UI package as an npm module

Publishing a reusable React UI package as an npm module is one of the easiest ways to maintain consistency across multiple apps.

Here’s a simple workflow that works well:

1) Structure your package properly

Keep a clean setup like:

src/ → components + exports

dist/ → compiled build output

index.ts → single entry for exports

2) Build it in a production-ready way

Before publishing, generate:

• ESM build (.mjs)


• CommonJS build (.js)


• TypeScript types (.d.ts)

Example build command:

npm run build

3) Publish it to GitHub Packages

Setup your registry in .npmrc:

@your-scope:registry=

Then publish:

npm publish

4) Use beta prereleases for safe testing**

This is the cleanest way to share updates early without breaking stable users.

npm version prerelease --preid=beta

npm publish --tag beta

✅ Stable users keep installing latest

✅ Test users install beta builds

✅ You can iterate faster without risk

This release pattern is simple, scalable, and keeps upgrades controlled.