Component platform • Discover components • Video demo • Docs • Blog • Gitter • Discourse
Bit makes it easy to share and manage components between projects and apps at any scale.
It lets you isolate components from existing projects with 0 refactoring, with fully-automated dependancy defintion/resolution and scalable versioning.
It lets you reuse individual components across projects, using your favorite package managers like npm and yarn through Bit's component hub.
It lets you extend Git's workflow to develop components from any consuming project , suggest updates and easily sync changes across your codebase.
Modular software makes for better software. It's faster to build, easier to test, simpler to maintain and more fun to collaborate on. Bit turns modularity into a practical commodity, bringing source-code management and reusable modules together. It helps teams build better software faster together.
Bit is a collaborative open source project, actively developed and maintained by a venture-backed team and used by more teams and communities every day.
Bit is used to quickly share and reuse code from any project. Every component can be installed, developed and used in any other project. Popular use cases are UI components and React components, JavaScript functions and more.
Learn: Build a Super-Modular Todo App with React and Bit Components.
Share components from UI libraries and projects, and use them to build new apps. Discover components from the community, to add to your apps. Example:
React spinners:
GitHub Repository → Components with Bit.
Once you choose a component, you can play with it in a live playground, save examples, and use npm/yarn to install it in your project.
Share components from JavaScript libraries and projects, and use them to build new apps.
Ramda functions:
GitHub repository → Functions with Bit.
Bit turns components into isolated and reusable building blocks you can run and develop from any other project in any context. It works in any given repository structure, without changing it at all, so the repository’s structure will remain the same.
When running the bit add command Bit will isolate components in the existing project structure. Meaning, Bit will track the components and create a dependency graph for each of them. With this data, Bit creates an isolated environment for each component, which lets the component run and work in any other project. For example, components written in typescript can be used and developed in a project written in flow-typed.
To tag a version for the components, use the bit tag command. At any point, you can use the bit status command to learn more.
Then, bit export them to a remote collection from which they can be installed in other projects. You can set up a collection on any server, or use Bit’s component hub. Here’s a quick demo.
Exporting 256 Ramda components (functions) from the repository to Bit’s hub in 2 minutes:
Once components are shared to Bit’s hub (which isn’t mandatory; Bit is distributed and you can set up a collection on any server), you can use them in other projects in a number of methods:
You can install components shared to Bit’s hub from Bit’s package registry via the NPM or Yarn clients. This means Bit can turn any repository and library into a multi-package monorepo almost instantly, without refactoring, and with advanced discoverability.
You can import components shared to Bit’s hub using the bit import command. This will source the component in your local project, so you can continue to develop it right from the consuming project. Since Bit will keep tracking the component, you can update and sync changes from your project to Bit’s hub (and if you wish, eject the component to become a package dependency) and to other projects.
Relying on Bit’s ability to import component into any project, you can develop the same component from different projects at the same time.
This creates a distributed workflow in which your team can collaborate and suggest new updates for each other’s components, so that they can be extended over time. It also lets you control permissions for who can update which component, rather than being limited by access to the library from which the components were shared from.
Bit can be extended to play with the tools you work with, including build and test environments to test and compile your components.
Pre-made environments, which are also Bit components that can be imported into your project before tagging the components, save the overhead of configurations for each component. You can use the example environments in Bit’s hub, or create your own. You can learn more about it in the docs.
Update: An extensive extension system is in the works and should become availabe within weeks. This will make the process of creating extensions effortless, and open new possibilities to integrate any tool or workflow into Bit’s code-sharing workflow.
Any repository or library containing components is already a Bit monorepo.
Adding Bit to the repository will not change its structure, source code or configurations. You won’t need to refactor or create separate directories and configurations for every component.
Instead, you can use Bit to track and share the components from your library directly to Bit’s hub. Then, they become availabe to install as individual NPM packages.
This means that your React UI library + Bit will become a monorepo from which components can be individually discovered and installed, without changing the library. Component dependencies will be automatically defined by Bit, and build/test configurations will be applied to all the components using Bit’s environments. In addition, you will get discoverability for the components across your team, community or organization.
Semantic UI library before Bit
Semantic UI React library with Bit
Semantic UI components in Bit’s hub
Learn more: Bit with and without Lerna.
Many teams keep separate repositories for different parts of their codebase.
When the same code is needed in different places, effective code-sharing becomes the key to development velocity and the maintenance of your codebase over time.
Bit makes this process more effective by:
- Eliminating the overhead around “publishing” code directly from any repository.
- Organizing and making these code units discoverable and manageable.
- Creating a collaborative code-sharing workflow where everyone, given permissions, can make changes, suggest updates and stay in sync.
As a result, you can share more code in less time and manage it at scale without having to “force” adoption or get lost in the overhead around the process.
Bit is a quick and effective way to create a design system from your components.
You can organize components for your team to share, view and try them hands-on in Bit’s hub component playground, and use components directly your projects.
Developers, designers and other team members can share, view and work with components to build faster together. Learn more.
Modularity has always been a key principle in software development.
In today’s ecosystem, the tools and technologies we use across our stack are built for modularity, from React/Vue/Angular/Web components in the front to GraphQL and NodeJS in the back, and even serverless functions.
Looking into the future, smaller components are the composable building blocks of our software applications. Instead of having to reinvent the wheel every time or having to work hard and long to share and reuse them, we should make it easy -and even fun- to discover, share and build with components. To that purpose, Bit was created.
And, it’s only the beginning.
Bit's design is language agnostic. Still, as of today, it requires language-specific drivers for language-sensitive features (binding etc). We released Bit’s driver for JavaScript, and will be releasing more drivers in the future. You are also welcome to add your own.
Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.
See Contributing.
Feedbacks and questions are more than welcome via Bit's Gitter channel or Discourse boards.
Apache License, Version 2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent