---
title: "KPI Component"
slug: "kpi-component"
tags: ["module-builder"]
updated: 2026-09-15T18:04:43Z
published: 2026-09-15T18:04:43Z
canonical: "docs.unqork.io/kpi-component"
---

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

# KPI Component

The KPI component displays a key performance indicator: a single numeric value with a label, optional title, and configurable formatting. Use it to surface important metrics like totals, counts, or percentages on dashboards.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `kpi` | The unique identifier for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | Identifies the component on the canvas. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| KPI Title | `kpiData.kpiTitle` | Text input | — | A title displayed inside the KPI box above the value. |
| KPI Format | `kpiData.kpiFormat` | Text input | — | A format string that wraps the numeric value (for example, `$XM` displays the value as `$12M`). Use `X` as the placeholder for the number value. |

## Data Settings

### Inputs

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `kpiData.dataInputObject.0.id` | Property ID | — | The module field whose value to display in the KPI box. |

## Advanced Settings

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| KPI Box Height (in px) | `kpiData.kpiHeight` | Number input | `150` | Sets the height of the KPI box in pixels. |
| KPI Icon | `kpiData.kpiIcon` | Text input | — | A Font Awesome icon class string displayed inside the KPI box (for example, `fa fa-usd`). |
| KPI Background Color | `kpiData.kpiColor` | Drop-down | **Default** | Sets the KPI box background color. Options include: **Default**, **Primary**, **Success**, **Danger**, **Warning**, or **Info**. |
| KPI Text Color | `kpiData.kpiColorText` | Drop-down | **White** | Sets the KPI text color. Options include: **White** or **Gray**. |

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

A quanitifiable measure of performance of a specific objective for a specified time.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.