I got an email late last night asking me for more detail about a comment I made on Spectrum a couple of years ago:

Have common Storybook for multiple projects? · React
We have 2 teams working on projects with separate React repos which should be sharing components and styles. Is there a nice way to have a common Storybook…

I don't have time to dig deep into this right now but hopefully a few quick instructions can provide enough context and I can fill in some of the blanks later.

To create a component library:

  • Create a git repository for your component library and add some component files to it.
  • You can add a site to showcase your components (we've used StorybookJS and VuePress to do this in the past).
  • Deploy your site (we deploy to an internal Kubernetes development cluster but I would suggest just deploying it to Vercel if you can).
  • Create a private npm module that contains your component files (you can use GitHub Package Registry to host the package).
  • Install the npm package into your application(s) and  import the necessary components (I recommend importing them individually since tree shaking isn't really ubiquitous yet).
import Avatar from '@myCompany/componentLibrary/components/Avatar'

  • You will likely need to configure your bundler (e.g. Webpack) to load / transpile the component source files when you are importing them since you likely are not doing that for files in node_modules.

Hope that helps!