Grow your SaaS organically with Programmatic SEO.
Try for free →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.
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:
npm i -g @teambit/bvm
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
bvm install
💡
If you're having trouble with bvm, restart your machine.
ui-components
.bit init --harmony
This will create all the necessary configurations necessary to run a bit server
package.json
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": {}
}
}
}
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.
Let's create your first component - a fancy looking Button
Bit makes it easy to scaffold a new component with fully auto-generated:
bit create react-component ui/button
This will generate the related files under the ui/button
directory.
💡
The above command will create your component with Typescript files. I would recommend this because it makes locating and fixing errors much much easier than plain javascript.
You can browse the component library with our brand new Button by running:
bit start
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.
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.
saasbase-demo
. Make sure Harmony is selected.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"
bit tag --all --message "first version"
bit export
There we go! Once exported, you should be able to view your newly created Button component in your bit.dev account.
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
To import our components, we need to first set up a Scoped Registry so NPM can find the packages.
npm config set '@<YOUR_USERNAME>:registry' <https://node.bit.dev>
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.
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;
Switch back to the ui-components
folder and let's update our Button.
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>
);
}
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.
I'm building a new SaaS to automate content marketing for your SaaS
Tools for SaaS Devs