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.

deprecated

teambit.bit

bit

Bit is an open-source component for composing comp...

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:

$npx @teambit/bvm install

Copied

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.

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:

$bit start

Copied

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:

$bit status

Copied

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.

Run the following to log in to your bit.cloud account:

$bit login

Copied

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):

$bit scope rename org.scope-name my-org.my-scope-name --refactor

Copied

Run the following to link to components (with their newly renamed scopes) from the node_modules directory:

$bit link

Copied

See command synopsis

Run the following to compile all components:

$bit compile

Copied

See command synopsis

Run the following to record your component changes and tag them with a semantic release version:

$bit tag --message "initial tag"

Copied

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.

$bit export

Copied

Head to your bit.cloud account to see your components in the remote scope.