Ansora UI
Components

Ansora KPI strip

A row of KPI cells in ONE card with internal dividers, not N cards with gaps. Scrolls horizontally rather than wrapping. Knows no domain — labels, values, icons and tones all come from props.

primitivedashboard

Install

pnpm dlx shadcn@4.23.0 add @ansora/kpi-strip

Examples

Usage

KpiStrip renders items: KpiCell[] as one card with vertical dividers between the cells (flex divide-x, not N cards with gaps) inside @ansora/section-card's scroll region — so the row scrolls horizontally on a narrow viewport instead of wrapping onto a second line. title is required — it is both the card's heading and the name of its scroll region, so it cannot be dropped. It renders through @ansora/section-card's titleHidden, so no visible CardHeader appears (the reference has no heading above the four cells, only the numbers) while title still resolves to a real, sr-only heading (role="heading" aria-level={2}) a screen reader can jump to, and still names the scroll region. There is no description prop: titleHidden forbids one at the type level, because there is no CardHeader left for it to render into. The component carries no domain content of its own: every string a screen reader or a user sees (title, KpiCell.label, KpiCell.hint, KpiCell.delta.label) is a prop.

import { KpiStrip } from "@/components/ansora/kpi-strip"

<KpiStrip
  title="Klíčové ukazatele"
  items={[
    { label: "Pacienti dnes", value: 128, icon: <UsersIcon />, hint: "vs 120 včera", delta: { label: "+8", direction: "up" } },
    { label: "V čekárně", value: 9, icon: <ClockIcon />, hint: "aktuálně čeká" },
  ]}
/>

KpiCell.value is string | number. The NUMBER branch is formatted for you with formatNumber; the STRING branch is passed through untouched, so anything with a unit is YOUR obligation to run through @ansora/core — formatUnit for a quantity, formatDose for a medication dose (it refuses a value it cannot render exactly). Never concatenate a unit with an ASCII space, or "10 mg" can wrap into "10" / "mg" and be misread. KpiCell.icon is ReactNode, so the component stays unaware of any icon library; the badge behind it is neutral unless tone: "warn" paints it amber — never green, and never derived from delta.direction. hint and delta are independent and may appear together. Exports KpiCell, KpiDelta, KpiStripProps. No hook, no "use client" — renders on the server; import icons from @phosphor-icons/react/ssr when composing this on the server.

Used by @ansora/dashboard for the clinic overview's KPI row — install this item directly when you need one KPI strip without the rest of the dashboard.

Files

Dependencies

  • @ansora/base
  • @ansora/section-card
  • @ansora/status-pill

Pruh filtrů

Strip nad seznamem: filtry obrazovky jako children, počet aktivních a cesta je zrušit, se sbalením pod md.

Patient header

Identity band at the top of a record: name, one identifier typeset with a slashed zero, and a named key-facts block, with slots for status flags and a correcting action.

On this page

InstallExamplesUsageFiles