# KpiGroup

> Metrics that belong together in one card, divided by hairlines.

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

Metrics that belong together in one card, divided by hairlines. Columns follow the
container width: 1, 2 or 4 across.

## Import

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

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

## Usage

```tsx
<KpiGroup items={items} animate />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `KpiGroupItem[]` |  |  |
| `animate` | `boolean` | `true` | Animate numeric values counting up. |

`*` 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-kpigroup--default)
- [Narrow](/storybook/?path=/story/containers-kpigroup--narrow)
- [Two Columns](/storybook/?path=/story/containers-kpigroup--two-columns)
- [Brutal Preset](/storybook/?path=/story/containers-kpigroup--brutal-preset)
- [Glass Preset](/storybook/?path=/story/containers-kpigroup--glass-preset)

## Source

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