# Count KPI

![Gentelella Count KPI](https://3673381106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzTHDZFPY1cn0SmL6dNak%2Fuploads%2FvwR0ZNts8TwkbVELPmHR%2Fimage.png?alt=media\&token=a62418c2-571d-449b-b98e-316398eb5f93)

The [Count KPI](https://colorlib.com/polygon/gentelella/index2.html) component is native to the Gentelella theme.  It displays an actual metric value at the top of the KPI along with pronounced label in the middle and a small description at the bottom.

## Library

The Count KPI component is located in the Gentelella for WireBootstrap library file located at `\lib\gentelella`.

## Class

The Count KPI extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the Count KPI component, use the `wire.gentelella.kpiCount` class.

```javascript
const kpi = new wire.gentelella.kpiCount();
```

## Example

An example that demonstrates the Count KPI component can be found in the Gentelella for WireBootstrap project at `\pages\kpi.html`.
