# How detection works?

## Component detection

Omlet detects and tracks the components that are defined and exported from JS/TS modules. Local components, which are components used within the same module that are *not* exported, are not surfaced in Omlet.

In the provided example, only **`ExportedButton`** will be tracked and reported in Omlet because it is defined and exported. **`Button`** is a local component used only within the **`button.tsx`** module, so it is excluded from the scanned results.

{% code title="button.tsx" %}

```jsx
function Button() {
  ...
}

export function ExportedButton() {
  ...

  return <Button/>;
}
```

{% endcode %}

### Component libraries published to NPM

If you own and manage a published component library, you can scan it with Omlet CLI like any other repository. Omlet will automatically detect dependencies and usage relationships between repositories.

### 3rd-party libraries

Omlet will detect the usage of components from 3rd-party libraries like MUI or Ant and tag them as "external" automatically. However, Omlet will only detect components used inside your project rather than all the components defined in the external library.

### How are components counted?

Components are counted against your workspace's component limit following the below criteria:

* Components scanned from your internal repositories are counted.
* 3rd-party library components used in your projects are counted. If a component from a 3rd-party library is not used in your projects, it'll not be detected and counted.
* Omlet counts each unique component only once, regardless of how often they're used within your repositories.
* Scanning a repository only affects if a component is added or removed. Existing components are not double-counted.

## Usage detection

Omlet detects and counts the unique usage of each component. If a component is used multiple times within the same component, Omlet will consider this a single usage.

In the given example, there are multiple instances of **`ListItem`** within **`ListView`** but Omlet will count this as a single usage of **`ListItem`.**

Using the same example below, Omlet will also recognize that **`ListView`** is using **`Button`** indirectly through a local component **`ListButton`**. However, **`ListButton`** will not appear in the results.

{% code title="Listview\.tsx" %}

```javascript
import Button from "./Button";
import  ListItem from "./ListItem";

function ListButton() {
  ...

  return <Button/>;
}

export function ListView() {
  ...

  return (
    <div>
      <div><ListItem/></div>
      ...
      <div><ListItem/></div>
      <div><ListButton/></div>
    </div>
  );
}
```

{% endcode %}

## Props detection

Omlet detects and identifies the props defined in each component and tracks the usage of those props in the component instances. You can learn more about the Props in Omlet [here](https://docs.omlet.dev/cli-and-dashboard/components/props-tracking).