v0.1.0

<PxKpi />ReactNavigation & dataFree

Stat tile

Stat tile with a rolling value, a change chip against a previous value and a pixel history; invert makes a drop read as good.

View as Markdown

<PxKpi />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxKpi />

Props

valuelive

previouslive

invertlive

formatlive

React

<PxKpi
  label="Revenue this month"
  value={48210}
  previous={42900}
  format="currency"
  note="vs. last month"
  data={[
    30,
    32,
    31,
    35,
    38,
    36,
    40,
    44,
    43,
    48
  ]}
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-kpi

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-kpi.json

Usage

px-kpi-example.tsx

import { PxKpi } from "@/components/lumesec/px-kpi";

export function Example() {
  return (
    <PxKpi
      label="Revenue this month"
      value={48210}
      previous={42900}
      format="currency"
      note="vs. last month"
      data={[30, 32, 31, 35, 38, 36, 40, 44, 43, 48]}
    />
  );
}

Behaviour

A metric with a rolling value, a change chip and a pixel history. Use invert when lower is better, so a drop shows green.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypenumberDefault0

The metric. Changes roll in, upward when the value grows.

previousTypenumber

Comparison value. When set and not 0, a chip shows the percentage change with ▲ or ▼.

invertTypebooleanDefaultfalse

For metrics where lower is better: a drop is coloured green and a rise red.

formatType"number" | "currency" | "percent" | "compact" | "ms"Default"number"

percent shows one decimal and %, compact shortens large numbers (48.2K). Uses en-US formatting.

currencyTypestringDefault"EUR"

ISO currency code used with format="currency".

labelTypeReact.ReactNode

Caption above the value.

noteTypeReact.ReactNode

Muted text at the end of the value row, such as "vs. last month".

dataTypereadonly number[]Default[]

History drawn as pixel columns; needs at least two values. A change replays the draw-in.

Ref

ref points at the root HTMLDivElement.

Accessibility

The value is an aria-live="polite" region, so updates are announced.
The history canvas is aria-hidden; the change chip is plain text with ▲ or ▼.
Reduced motion: the value and change chip swap without rolling and the history appears at once.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec-success, --destructive, --foreground and --muted-foreground.

Notes

The history is green when the value is at or above previous, or when there is no previous, and red otherwise; invert swaps this.
percent shows the value as given, so 12.5 reads 12.5%.

<px-tabs>

Tabspx-tabs

<px-pagination>

Paginationpx-pagination

<px-nav>

Sidebar navpx-nav

<px-accordion>

Accordionpx-accordion

Was this page helpful?

Related