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


This is the formula how the adoption rate is calculated

Adoption rate  = (used core components + used tokens ) / (total components + total tokens)
For more information about core components and Tokens check Components and Tokens sections accordingly.
total components = (used core components + unused core components) + used non-core components
total tokens = used tokens + unused tokens
If you don’t track Tokens then tokens part is omitted and not taken into account on calculations.


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

What are the core components ?

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.
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.

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 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);