Packaging a design system as an npm dependency

WHAT THIS TESTS This checks baseline knowledge of how shared frontend code is distributed and versioned across projects, and which file governs the version contract.

A GOOD ANSWER COVERS The standard approach is to publish the design system as an npm package to a registry, either the public npm registry or a private one such as a company registry or GitHub Packages, possibly under a scope. Consuming projects then add it as a dependency and install it with their package manager. The crucial file is package.json. Its version field is the single source of truth for the package version and must follow semantic versioning, major dot minor dot patch. Other fields matter too: name identifies the package, main and module and the modern exports map define entry points for CommonJS and ES modules, types points to TypeScript declarations, files or an ignore file controls what gets published, peerDependencies declares shared libraries like React so consumers do not get duplicates, and sideEffects helps tree-shaking. A lockfile pins exact resolved versions for reproducible installs.

COMMON WRONG ANSWERS Suggesting copy-paste between repos creates drift and no version history. Git submodules are fragile and lack proper version ranges. Bundling React as a hard dependency rather than a peer dependency risks multiple React copies. Forgetting to set the files allowlist can publish source or tests by accident.

LIKELY FOLLOW-UPS How do you bump the version, and what does each SemVer segment mean? What are peerDependencies for? How do you publish a private package and control access? What is the difference between a caret and tilde range in a consumer? How does the exports field support dual ESM and CJS?

ONE CONCRETE EXAMPLE A company publishes acme-ui at version 2.4.1 to its private registry, with React listed as a peer dependency and an exports map for ESM and types. A product app adds it with a caret range, so npm install pulls 2.4.x patches automatically, and the team bumps the version in package.json on each release.