# KpiValue

> The highlighted number of a composed `Kpi`, coloured by the tile's tone.

Source: https://ui.jcsoftdev.com/docs/components/kpi-value

The highlighted number of a composed `Kpi`, coloured by the tile's tone.

## Import

```ts
import { KpiValue } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/kpi`.

## Usage

```tsx
<KpiValue
  label="Citas hoy"
  value="12"
  description="3 pendientes"
  variant="default"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `suffix` | `ReactNode` |  | Small suffix next to the number. |
| `trend` | `ReactNode` |  | Change indicator next to the value. |
| `mono` | `boolean` |  | Monospaced digits at a steady weight, for amounts and codes. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-kpi--default)
- [With Suffix](/storybook/?path=/story/containers-kpi--with-suffix)
- [Danger](/storybook/?path=/story/containers-kpi--danger)
- [Occupancy](/storybook/?path=/story/containers-kpi--occupancy)
- [Narrow](/storybook/?path=/story/containers-kpi--narrow)
- [Tone Dot Icon Trend](/storybook/?path=/story/containers-kpi--tone-dot-icon-trend)
- [Card](/storybook/?path=/story/containers-kpi--card)
- [Trailing](/storybook/?path=/story/containers-kpi--trailing)
- [Composed](/storybook/?path=/story/containers-kpi--composed)

## Source

`packages/ui/src/containers/kpi/kpi.tsx`