# KpiDescription

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

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

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

## Import

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

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

## Usage

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

## Props

This component declares no props of its own.

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`