So, in about 30 minutes with 0 refactoring and fully-automated resolution for component dependencies, versioning and environment setup, we were able to make all the components from the library individually discoverable and useful for our team. It’s pretty quick to do the same for any number of libraries:

How to do it yourself

Here is a short tutorial to how you can use Bit to share the components from your library into your own playlist-like collection and use them in other apps.

Organize your favorite components an make them available with Bit

Here are some of the main advantages:

No refactoring! Really.

Bit automatically handles all component dependencies in the repo, so you don’t need to invest time in managing a package.json for each of them.

for each of them. Bit makes it very easy to version components in the repo and manage versions across projects.

You get a shared collection where each component can be individually installed, and then even developed and updated from any other repo.

Here’s the quick-start, but let’s do it ourselves. First, let’s install Bit and initialize it for your library.

# install Bit

npm install bit-bin -g # Initialize Bit for your library

$ cd project-directory

$ bit init

Next, let’s tell Bit to start tracking the components in our library.

For example, let’s track the components button , login and logo in the following project’s directory structure.

$ tree

.

├── App.js

├── App.test.js

├── favicon.ico

├── index.js

└── src

└── components

├── button

│ ├── Button.js

│ ├── Button.spec.js

│ └── index.js

├── login

│ ├── Login.js

│ ├── Login.spec.js

│ └── index.js

└── logo

├── Logo.js

├── Logo.spec.js

└── index.js



5 directories, 13 files

You can track the components using a glob pattern, or use a specific path to track individual components. When tracking, Bit will also automatically define all package / file dependancies for the components.

$ bit add src/components/*

tracking 3 new components

Next, let’s import a Bit compiler for all the components in the project. You can find pre-made environments here, or create your own. Let’s use pre-made ones for React — which will apply to all the components in the library.

$ bit import bit.envs/compilers/react --compiler

Next, let’s use bit tag to lock a version for the components, wrap them in an isolated environment and automatically resolve their dependency graphs.

$ bit tag --all 1.0.0

3 components tagged | 3 added, 0 changed, 0 auto-tagged

added components: components/button@1.0.0, components/login@1.0.0, components/logo@1.0.0

Your components are now tracked, versioned and ready to be shared.

All that’s left is to create a collectionon Bit’s free hub, and use bit export to share the components to the collection. Note that Bit will not remove the components’ files from the original library, which remains untouched.

$ bit export user-name.collection-name

That’s it!

The components from your library are now all individually discoverable and usable for any developer you share the collection with to use in their projects.

Using individual components

Once your components are ready in your collection they become discoverable for everyone on your team to find and use in their projects.

Choose and use UI components from any app with Bit

There are two ways to consume the components in other projects.

First, you can use bit import to bring any component’s source code into your project, which allows you to make changes and modify it.

This means you don’t have to go through the original library’s repo to make changes, and you can simply create new versions of the component right from your project- reducing the pain around working with component libraries.

Since Bit tracks components across different projects, you will also be able to make changes and update your components from any project and even merge changes to shared components between different projects!

Second, every component shared with Bit becomes automatically available to install using NPM / Yarn. You can learn more about it here.

Note that when you use NPM to install a component as a package dependency in your project, you can still bit import the component’s source code into the project, change it, and update the component to update the package.

Different teams, different workflows

Sometimes (not always) it still makes sense to keep common code in a designated project and share your components from there. It’s really up to you how you choose to create the perfect workflow for your team.

Either way, Bit can help you share the components from your library and make them independently available to use in any other projects.

The enhanced discoverability of Bit helps you collaborate with your team, when every developer can easily find the components they need from the library and use them in their own projects without setbacks.

You can enforce standards for component changes and updates or let everyone create their own versions of the components, it’s up to to decide which workflow best fits your team.

Bit is open source and you’re welcome to use it, contribute or suggest feedback.

Learn more: