Using Components

You can compose components together from other components in your workspace or from components in the cloud.

Composing Components#

When importing a component into another component Bit doesn't allow for relative require/import statements, as this couples your component to a specific directory structure, instead you use the component's package name. In the workspace UI you will see the package name for your component which you can copy to import it.

TypeScript
JSX

card.tsx

import React from 'react'import { Button } from '@my-scope/ui.button'
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
export const Card = ({ children, ...rest }: CardProps) => {  return (    <div {...rest}>      <Button>Click here</Button>    </div>  )}

card.jsx

import React from 'react'import { Button } from '@my-scope/ui.button'
export const Card = ({ children, ...rest }) => {  return (    <div {...rest}>      <Button>Click here</Button>    </div>  )}

Your Component in the Workspace#

In your workspace UI you will now see your card component rendered with the button component inside it.

Component Module Links#

Bit creates a module for each component in the workspace. These modules are linked in the node_modules directory and contains it's build output and auto-generated package.json. To see this in your workspace, browse the node_modules/@my-scope/ui.button directory.

To import a component as a dependency you must use the module link. This way your component is not coupled to a specific directory structure in the workspace, which makes them transferable between workspaces.

Generating module links#

To regenerate module-links for components run the bit link command.

tip

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

What's Next?#

It's time to create a Remote Scope so you can see you component on the Bit.dev cloud and then export it and import it into another application.

Learn more about tracking components and removing components