Start building from composable examples...
Hello React
A simple React and Node example to get you started with component-driven development.
Hello Angular
A simple Angular and Node example to get you started with component-driven development.
Hello Vue
A simple Vue and Node example to get you started with component-driven development.
Design
Build a component-driven design system
Todo MVC
A TodoMVC app with Vue.js.
Wiki
Learn how to use component-driven wiki to power knowledge sharing.
Data Fetching
Build a component-driven data fetching
Analytics
Build a component-driven analytics
Welcome to the Bit documentation site! This site is a composition of independent components, built and maintained mainly by the Docs, Design and Community teams here at Bit! It was built from React, Markdown, and Node components we have crafted specifically for the purpose and needs of this app.
During this quick start, you will learn to build your own composable design system. This will allow to create and evolve a consistent design and brand language across your different projects and keep them up to date.
Below is a sample app demonstrating few design components affected by a theme using design tokens. Click the toggler on the upper right corner to see the affect of the theme on our components.
Design heading
This is a simple design card that uses design tokens and agnostic to the specific theme used! Switch themes with the toggler on the top right check it out.Design Systems are a powerful way to increase design consistency, strengthen you brand, and breed collaboration between team members and even across teams.
Components also act as a source of truth and a common language for developers and designers, allowing all parties to agree and use the same components across designs and products.
Bit is an open-source tool for composing component-driven software.
Bit stands at the intersection between product and engineering. It helps you take complex product requirements, and break them down into independent, and reusable pieces called "components". It allows you to create components and compose them with each other. Components are described by names and APIs, and contain source code implementation. They can be of different kinds like apps, pages, UI components, backend services and even content. You can think of almost anything in components.
Components can be as “big” as modern web applications, e-commerce shops, large building blocks like a Blog, a Wiki or a Hero. They can also be as “small” as simple UI components like Header, Footer or other useful design components. Every Bit Component, whether it is “big” or “small” is just a composition of others, where each is kept small and independently maintained.
Bit does not prescribe how to build your entire application. It helps you define and compose components and allows for every component to adopt the dev tools that best fit its nature. A React component is likely to be compiled, tested and perhaps even deployed using a composition of tools different than the one a backend-service component, or a generic function, may use. Bit offers native support for various dev tools like TypeScript, Babel, Jest, Webpack, ESLint and ready made development environments for React, NodeJS, Angular and more. New tools can be easily integrated by extending Bit with one more component.
Anything is possible with Bit! We built Bit and bit.cloud entirely using Bit. These are complex systems which includes infrastructure tools, cloud products and multiple user interfaces.
People use Bit to create all kind of applications, from user interfaces with component-driven frameworks like React, Vue and Angular, to complex micro-service architectures, serverless functions, CLI utilities, desktop applications, native mobile applications and even IoT. You can do with Bit about anything you can do with JS and even beyond.
Bit was built with TypeScript and supports it natively. It was designed to be language-agnostic, and will support other software languages in the future! For now, our development environments use TypeScript as the default compiler for JS and TS components. You can easily switch to Babel or any other compiler. Bit is completely agnostic to your tech stack.
To get started, install Bit on your machine:
For a more advanced installation guide, head to our installation section.
Initialize a workspace to start your journey into component-driven development. A workspace is a group of files and directories that provide the necessary context for components to be authored, composed, maintained, and collaborated on.
Open your workspace directory:
Your workspace maintains a number of components. One of these components is also an app.
Run the following to run the app component:
A Bit component is a reusable, independently source-controlled module, that is stored in scopes and maintained in workspaces. Bit components enable a new software development strategy that can be used to complement monorepos and poly-repos, or replace them, altogether.
Run the Workspace UI to preview your components:
The workspace UI displays all components maintained by your workspace. Use it to explore your components' compositions, documentation, dependency graph, version history, and more.
Run the following to verify there are no issues preventing Bit from snapping each component, independently:
The output should confirm all components are ok
to be snapped. The components' status is currently new
as they were forked by the workspace starter and not imported.
The snapping process creates an immutable snapshot of the components' latest changes. The component's 'scope' property is part of these changes. Follow the next section to create your own scope and set your components, accordingly.
A scope is a collaboration server for components. It lets you export components from your workspace, store them remotely, and collaborate on them with others. Developers with access to your scope can use your components or suggest changes.
Scopes help organize components in a shared domain of responsibility. For example, the analytics scope includes all components that provide analytics services, and the design scope includes the services for our design language.
Create your free bit.cloud account
If you don't have a remote scope yet, it is a good time to create one! You can create an unlimited number of private and public scopes on bit.cloud, for free, or self-host your scopes.
Create your accountRun the following to log in to your bit.cloud account:
Set the components in your workspace with your newly created remote scope (replace 'my-org' with your username or organization name. For example, john.my-wiki
):
Run the following to link to components (with their newly renamed scopes) from the node_modules
directory:
Run the following to compile all components:
Run the following to record your component changes and tag them with a semantic release version:
Export your staged components from your workspace to their remote scopes. This will make them available to be consumed by components outside of your workspace, as well as by traditional monolithic projects. More importantly, this will enable you to collaborate on individual components, independently.
Head to your bit.cloud account to see your components in the remote scope.