Building a UI Library With Bit and Bit.dev

What is Bit/Bit.dev?

Bit.dev is a component hub (a private registry and a documentation site). It’s where you host, document, and manage reusable components from your different projects. It works perfectly with Bit, an open-source tool that handles component isolation and publishing (when using Bit.dev, components are published to Bit’s registry).

Example: Browsing through component collections in Bit.dev

As mentioned earlier, components can be published to a collection from any project at all. To demonstrate that, I’ll harvest and publish components from a demo React with TS app.

1. Create a component collection in Bit.dev.

2. Install Bit globally (npm/Yarn).

$ yarn global add bit-bin

3. Log into your account.

$ bit login

4. Initialize a workspace in the project’s directory.

// To follow along with my demo app, clone and install it

$ cd react-ts-demo-app

$ yarn

$ git clone https://github.com/giteden/react-ts-demo-app.git $ cd react-ts-demo-app$ yarn // initialize a workspace (in your project's directory) $ bit init --package-manager yarn

Note: Notice how a new .bitmap file has been added to your directory, and a bit section has been added to your package.json .

5. Track all components. In my case, components are located in the components directory (for example, src/components/button/index.js ):

$ bit add src/components/*

Note: Placing all files under the same directory is yet another way to make your code more comprehensible to other developers (maintainers and consumers of your reusable components). It’s much easier to understand how different files relate to each other when they’re grouped under the same directory. Moreover, it’s a way to make your reusable component more mobile and autonomous.

6. Configure a compiler to make the components usable in other environments with different setups:

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

Note: For other compilers, check out Bit’s ENVs collection or learn how to build your own.

7. Tag the components to build them in isolation (and lock changes):

$ bit tag --all 1.0.0

Note: Bit tracks your component dependencies by itself and doesn’t require manual configuration. Having said that, it’s good practice to check for unresolved dependency issues using $ bit status .

8. Export all tracked components (push them to the shared collection):

$ bit export <user-name>.<collection-name>

The components are now shared and publicly available 👍