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=https://npm.pkg.github.com
//https://lnkd.in/dcqNXmcg

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.