Kpi

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

Import

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

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

Usage

<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
• With Suffix
• Danger
• Occupancy
• Narrow

Source

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