Publishing Component Libraries

🚀 What Does It Mean to Publish a Component Library?

Publishing a component library means packaging your reusable UI components (buttons, modals, inputs, etc.) and sharing them so others—your team, company, or the open-source world—can install and use them via a package manager like npm or yarn.

This enables scalability, design consistency, and better collaboration across multiple projects or teams.

🧱 When Should You Publish a Library?

• Design System Usage: You’ve built a consistent UI and want to use it across apps
• Multiple Projects: You’re repeating the same components in multiple codebases
• Team Collaboration: Backend and frontend teams need a shared UI foundation
• Open Source Contribution: You want to help others by releasing your components

🔧 Step 1: Organize Your Component Library

Your library should be structured for reusability and modularity:

my-ui-library/
├── src/
│   ├── Button/
│   │   └── Button.jsx
│   ├── Input/
│   │   └── Input.jsx
│   └── index.js
├── package.json
├── README.md
└── .npmignore
  

Make sure all components are exported from index.js:

// src/index.js
export { default as Button } from './Button/Button';
export { default as Input } from './Input/Input';
  

⚙️ Step 2: Create a Package Manifest

Your package.json file defines metadata about your library:

{
  "name": "@yourname/my-ui-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
  

Use peerDependencies to prevent bundling multiple versions of React.

📦 Step 3: Bundle Your Components

You need to convert your React components into a format that can be published and used elsewhere. Tools like Rollup or Vite help here.

rollup.config.js

import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.js', format: 'cjs' },
    { file: 'dist/index.es.js', format: 'es' }
  ],
  plugins: [
    peerDepsExternal(),
    babel({ babelHelpers: 'bundled' })
  ]
};
  

Run the build command:

npm run build

🧹 Step 4: Clean Up With .npmignore

Add a .npmignore file to exclude development files from your published package:

src/
storybook-static/
node_modules/
rollup.config.js
README.md
  

🆔 Step 5: Authenticate and Publish

First, login to your npm account:

npm login

Then publish your package:

npm publish --access public

If you're using a scoped name like @yourname/your-package, you must use --access public for open-source visibility.

📥 Step 6: Install Your Library Anywhere

npm install @yourname/my-ui-library

Then use your components:

import { Button, Input } from '@yourname/my-ui-library';

function App() {
  return <Button label="Click Me" />;
}
  

📚 Add Docs with Storybook

Pair your component library with Storybook to document components. This helps consumers understand how to use them and see live examples.

Example: Button.stories.jsx

export const Primary = () => <Button label="Primary" variant="primary" />;
  

💡 Best Practices

• Use semantic versioning (semver): MAJOR.MINOR.PATCH
• Keep your library small: Bundle only what’s needed
• Document everything: README + Storybook
• Test before publishing: Unit and integration tests
• Update versions carefully: Use npm version patch/minor/major

✅ Final Thoughts

Publishing a component library empowers your development team with consistency, reusability, and speed. Whether you’re building for internal teams or open-source users, a well-structured library saves time and increases reliability. 🌟

Start small—maybe just a button and input. Once you’ve got the publishing flow down, scale your library with patterns, themes, documentation, and testing. Your future self (and your teammates) will thank you! 🙌