Skip to main content

Creating Components

To create new components use the bit create command. This will create a generic component for you with all it's necessary files.

Using Bit Create#

bit create react-component ui/card

is the same as

bit create react-component card --namespace ui

The following message will appear in the terminal and your component will be created at the location specified and using the env that has been set in your workspace.jsonc.

the following 1 component(s) were created
my-scope/ui/card    location: my-scope/ui/card    env:      teambit.react/react
tip

Use bit create --help or bit create -h to get a list of available options for this command.

Namespaces#

Namespaces serve as folders that organize components in the Workspace or inside a scope on bit.dev. You can use namespaces inside a scope to group related components.

To namespace a component use the --namespace or -n option.

Specifying a namespace helps you organize your components and lets you perform actions on multiple components at once. Namespaces are also useful in specifying overriding rules for all components under a specific namespace.

Component Location#

Components are created in a directory using the name configured in your defaultScope in your workspace.jsonc. The defaultScope should be configured as your username.scope-name and cannot contain a /. If you would like to change the default behavior of where you components are created you should use the --path flag.

bit create react-component ui/button --path bit/components
Organizing your Components

We don't recommend creating Bit components in your apps src/components folder. You should build components as if they were external modules, as if your components were in a different app.

Bitmap File#

After adding a component the .bitmap file will be regenerated to show the added component. For now the scope and version will be empty. Below is an example of button component created with the ui namespace.

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
{  "ui/button": {    "scope": "",    "version": "",    "mainFile": "index.ts",    "rootDir": "my-scope/ui/button"  },  "version": "1.0.39"}
my-scope

Components are created under the default scope name which in this case is my-scope. You can configure the default scope name in the workspace.jsonc file.

Installing Dependencies#

Our component contains a spec.tsx file that includes a dependency for Testing Library. If you don't already have this library installed you can install dependencies using bit install:

bit install @testing-library/react

Creating multiple Components#

Create multiple components by adding more component names after the command.

bit create react-component ui/component1 ui/component2 design/component1

Bit Templates#

To see a list of component templates available:

bit templates

If you would like to create your own component template generator then check out our guide in Extending Bit