Build consistent UIs across Frontend apps using React and Bit.dev

In this guide, we will build a library of UI components with bit.dev that we can import and use in all our frontend applications.
- Frameworks: React, Typescript
- Tools Used: bit.dev
- Time saved: 1 week -> 1 hour
- Source Code
Introduction
As you build out your products, you want to be consistent so users recognize your brand - same colors, fonts, interactions across all platforms and all applications. This becomes difficult to implement when you have to create the same UI components across all your codebases - maintaining them, updating them becomes a hassle.
Bit.dev lets you build a library of UI components with React that can be imported into your frontend React applications using NPM.
In this guide, you will:
- Create a Button component in React with unit test
- Build a design library in bit.dev and upload it to remote bit.dev server
- Import the components in a frontend React project
- Make changes to the underlying components and watch them apply automatically to the frontend
Step 1: Installing Bit.dev
- Let's start by installing BVM - Version manager for Bit.
npm i -g @teambit/bvm
2. Depending on the machine you're using, you have to make bvm
available in your terminal. Run the appropriate command:
setx path "%path%;%LocalAppData%\.bvm" #windows
echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc #bash
echo 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc #zsh
3. Restart your terminal and run:
bvm install
Step 2: Creating UI Components Library with Bit.dev
- Create a new folder called
ui-components
. - Initialize bit by jumping into the folder and running:
bit init --harmony
This will create all the necessary configurations necessary to run a bit server
- .bit: Folder that keeps component versioning data
- .bitmap: Autogenerated file that keeps track of available components
- workspace.jsonc: Configuration for your bit project. Similar to a
package.json
Â
3. Let's add React to our project by editing workspace.jsonc
like so:
{
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
"teambit.workspace/workspace": {
"name": "my-bit-demo",
"icon": "https://static.bit.dev/bit-logo.svg",
"defaultDirectory": "{scope}/{name}",
"defaultScope": "my-bit"
},
"teambit.dependencies/dependency-resolver": {
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {},
"peerDependencies": {
"react": "17.0.2",
"react-dom": "17.0.2",
"@testing-library/react": "12.0.0"
}
}
},
"teambit.workspace/variants": {
"*": {
"teambit.react/react": {}
}
}
}
4. Just like a package.json
, you can install the listed packages by running:
bit install
Sweet! Your bit project is ready to go. We don't have any components to take a look at yet but that's what we will do next.
Step 3: Creating Components
Let's create your first component - a fancy looking Button
Bit makes it easy to scaffold a new component with fully auto-generated:
- Unit tests
- Documentation
- Use case variations
- Let's create a new Button by running:
bit create react-component ui/button
This will generate the related files under the ui/button
directory.
You can browse the component library with our brand new Button by running:
bit start
Fixing broken unit tests
There's a small issue with the auto-generated test where it will fail because it's not set up correctly. Update the button.composition.tsx
with:
export const BasicButton = () => {
return <Button>hello from Button</Button>;
};
and run bit test
to confirm that all tests pass.
Step 4: Export Components to Remote server
Our component library currently is running locally. You can export them and host them on bit.dev remote server to be used in other frontend projects.
- Create a new bit.dev account here
- Create a new Scope. Think of Scope like a project folder. You would create a separate Scope for each project you work on. I named mine -
saasbase-demo
. Make sure Harmony is selected.

3. Update your workspace.jsonc
to include your bit.dev username and scope as the default scope like so:
{
...
"defaultScope": "<YOUR_USERNAME>/<YOUR_SCOPE>"
...
}
For example, mine would be "defaultScope": "sssaini/saasbase-demo"
4. Similar to how you might do a git commit, you can tag your components for export by tagging them like so:
bit tag --all --message "first version"
5. Now push them to the remote server with:
bit export
There we go! Once exported, you should be able to view your newly created Button component in your bit.dev account.

Step 5: Creating a React frontend project
Let's start a frontend that will use our UI Component library:
npx create-react-app frontend
Jump into the folder and install dependencies with:
cd frontend
npm install
We can run our React frontend with:
npm start
Step 6: Importing Bit.dev UI Component into React
To import our components, we need to first set up a Scoped Registry so NPM can find the packages.
- Add your scope with:
npm config set '@<YOUR_USERNAME>:registry' https://node.bit.dev

2. Now we are ready to import our Button component with installing:
npm i @YOUR_USERNAME/<YOUR_SCOPE>.ui.button

Sweet! You've just imported a component from a Design Library successfully. Now you just use it as you would another React component.
3. Edit App.js
to include the Button:
import logo from './logo.svg';
import { Button } from "@sssaini/saasbase-demo.ui.button"
import './App.css';
function App() {
return (
<div style={{ width: "100vw", height: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
<Button>My cool button</Button>
</div>
);
}
export default App;
Step 7: Update UI component definition
Switch back to the ui-components
folder and let's update our Button.
- Edit the
my-bit/ui/button/button.tsx
:
import React, { ReactNode } from "react";
export type ButtonProps = {
children?: ReactNode;
};
export function Button({ children }: ButtonProps) {
return (
<div>
<a
style={{
backgroundColor: "#345DEE",
borderRadius: "0.5rem",
color: "white",
textDecoration: "none",
padding: "0.75rem 1rem 0.75rem 1rem",
display: "flex",
justifyContent: "center",
}}
>
{children}
</a>
</div>
);
}
2. Tag and export the second version of the Button by running:
Step 8: Import newly updated Button component
Switch to the frontend project and install the new version of the component by running:
npm i @sssaini/ecommerce-demo.ui.button@0.0.2
The component should be updated.

There we have it! A well documented UI component library that can be reused in as many front-end projects as you want and deliver consistent experiences to your users.