Stat

TS

import { … } from "@fungi.computer/caps/components/stat";

Hero

TSX

import { Stat } from "@fungi.computer/caps/components/stat";

export default function Hero() {
  return (
    <Stat label="Mushrooms logged" value="1,204" description="This season" />
  );
}

Grid

TSX

import { Stat } from "@fungi.computer/caps/components/stat";

export default function Grid() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Stat label="Species" value="38" />
      <Stat label="Patches" value="12" />
      <Stat label="Jars canned" value="96" />
    </div>
  );
}

Compact

TSX

import { Stat } from "@fungi.computer/caps/components/stat";

export default function Compact() {
  return (
    <div className="grid w-48 gap-1 rounded-box border border-base-300 p-2">
      <Stat density="compact" label="Oyster" value="14" />
      <Stat density="compact" label="Lion's mane" value="6" />
    </div>
  );
}

Props

StatProps

Prop	Type	Description
label	ReactNode
value	ReactNode
description?	ReactNode
density?	"regular" | "compact"	Reduce internal padding when a statistic sits inside a compact card.

• labelReactNode
• valueReactNode
• description?ReactNode
• density?"regular" | "compact"

  Reduce internal padding when a statistic sits inside a compact card.

Full types: API reference.