# Kpi

> `Kpi` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

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

`Kpi` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

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

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

## Usage

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `ReactNode` |  | Short label describing the metric. |
| `value` * | `ReactNode` |  | Highlighted number, already formatted by the consumer. |
| `suffix` | `ReactNode` |  | Small suffix next to the number, e.g. "/12". |
| `description` | `ReactNode` |  | Optional subtext. |
| `variant` | `"danger" \| "default"` | `"default"` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

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

## Source

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