Importing components

Bring components from remote scopes into your workspace to maintain, update, and collaborate on them.

To import a component to a workspace:

$bit import teambit.design/info/icon-text

Copied

See command synopsis

To use a different version, include its version @version in the component ID. For example: teambit.design/info/icon-text@0.0.7.

Now your component is linked can edited like any other component in your workspace. Changes you make won't affect the original component until you export your changes back to the remote scope.

Run preview

Use bit start to explore the imported component in your workspace UI and start its development server or run apps in your workspace consuming the component to preview its affection on the app using bit run my-app.

Import dependents

When you import a component, you can also import its dependent components. This lets you test changes locally to see how they affect dependent components.

$bit import --dependents

Copied

Manage component changes

After making changes to an imported component, start a change request process to safely release your changes and see affect on other scopes.

$ bit lane create my-changes
$ bit snap --message 'proposing new changes'
$ bit export
Copied

After sharing a lane, you can submit a change request to start collaborating towards releasing your changes.

Ejecting components

After making changes, testing or debugging a component in your workspace you can invert it to be used as an external dependency.

$bit eject info/icon-text

Copied

See command synopsis

Forking Components

Forking creates a copy of a component in your workspace, allowing you to modify it independently. The forked component starts as a new component without any version history.

To fork a component, run:

$bit fork teambit.design/basic/button name/spaces/my-new-button

Copied

info

During the fork process, bit will internally refactor the component's file and named identifiers to match the new component name. Add the --preserve flag to skip this internal refactor.

Run the following to fork a component and change its scope to a scope different than your workspace default scope:

$bit fork teambit.design/basic/button --scope my-org.my-scope

Copied

Refactoring

If the source component is in your workspace, use the --refactor option to update the import statements in all dependent components (in the same workspace). For example:

$bit fork teambit.design/basic/button --scope my-org.my-scope --refactor

Copied

All occurrences of import { Button } from '@teambit/design.basic.button' are now replaced by import { Button } from '@my-org/my-scope.basic.button'.