Component library

Showing 2 components in the core deck with role stats.

  • <BigStat>

    coreStatsPresentation

    Single oversized metric with label, optional unit suffix, hint, and a longer description.

    When to use: One number that should land emotionally.

    Preview

    Invoices / month

    1,240

    AP team, three legal entities

    Manual hours

    142hrs / week

    Across intake, matching, and exception handling.

    PropTypeNotes
    labelstringRequired. Short label above the value.
    valuestringRequired. The headline value.
    unitstringOptional. Short suffix beside the value at a smaller scale (e.g. "%", "hrs / week").
    hintstringOptional. Muted footnote under the value.
    descriptionstringOptional. Longer supporting sentence under hint.

    Examples

    <BigStat label="Invoices / month" value="1,240" hint="AP team, three legal entities" />
    <BigStat label="Manual hours" value="142" unit="hrs / week" description="Across intake, matching, and exception handling." />

  • <MetricStrip>

    coreStatsPresentation

    Compact 3 to 6 KPI tiles in one strip with optional delta chips and RAG dots; tiles stagger in on slide enter (client).

    When to use: Use for headline metrics on IC, project, or portfolio slides where each metric needs a one-line label and an optional trend or RAG indicator.

    Preview

    £412m

    AUM

    +5.2%

    1.8x

    MOIC

    +0.1x

    12

    Holdings

    3

    On watch

    PropTypeNotes
    items{ value: string; label: string; deltaValue?: string; deltaTone?: "up" | "down" | "flat"; ragStatus?: "red" | "amber" | "green" }[]Required. Three to six tiles. Pre-format the value string yourself (currency, units).
    tweenobjectOptional. Optional GSAP vars for the tile entrance.

    Examples

    <MetricStrip
  items={[
    { value: "£412m", label: "AUM", deltaValue: "+5.2%", deltaTone: "up" },
    { value: "1.8x", label: "MOIC", deltaValue: "+0.1x", deltaTone: "up" },
    { value: "12", label: "Holdings", ragStatus: "green" },
    { value: "3", label: "On watch", ragStatus: "amber" }
  ]}
/>