> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stylebit.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Adoption rate

> Making sense of metrics dashboard.

Stylebit adoption has 3 sections about adoption rate.
`General`, `Components`, `Tokens`

### General

This is the formula how the adoption rate is calculated

```
Adoption rate  = (used core components + used tokens ) / (total components + total tokens)
```

<Tip>For more information about core components and Tokens check Components and Tokens sections accordingly. </Tip>

```
total components = (used core components + unused core components) + used non-core components
```

```
total tokens = used tokens + unused tokens
```

<Note>   If you don't track Tokens then tokens part is omitted and not taken into account on calculations.</Note>

### Components

```
Adoption rate = used core components / (used core components + unused core components)
```

What are the core components ?

<Info>      Core components are  the components whose definitions found under `componentRoot` folder specified in your config file which is supposed to be your component's library root folder.</Info>

<Info> If you are tracking through `packageName` then core components are the components imported from that package. In this case adoption rate is almost always 100% cause whatever is imported from the package most probably is also used in your code if you have proper linting.</Info>

In the component section you will also find an information about `non-core` components. Just don’t get confused, they don’t have an impact on core component adoption rate.

If you are searching the ratio of components from your library to overall components then check the `General` section..

### Tokens

Tokens section is pretty straightforward

```
  Adoption rate = used tokens / (used tokens + unused tokens)
```

in the code below `--white01` is used token and `--zindex-tooltip` is not used token.

```
:root {
    --white01: rgba(255, 255, 255, 0.1);
    --zindex-tooltip: 1001;
}
```

```
.dividerVertical {
  background-color: var(--white01);
}
```