Stat.

import { Stat, StatGroup, StatLabel, StatValue } from "@/components/ui/stat";

export default function StatDemo() {
  return (
    <StatGroup className="w-full">
      <Stat>
        <StatLabel>sites on the network</StatLabel>
        <StatValue>128</StatValue>
      </Stat>
      <Stat>
        <StatLabel>servers connected</StatLabel>
        <StatValue>14</StatValue>
      </Stat>
      <Stat>
        <StatLabel>guestbook entries</StatLabel>
        <StatValue>3.2k</StatValue>
      </Stat>
    </StatGroup>
  );
}

Installation#

With the CLI

$npx lanterncn add stat

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/stat. See Installation if your project is not set up yet.

Manually

1. Copy the source into your project

   components/ui/stat.tsx

   import * as React from "react";
   
   import { cn } from "@/lib/utils";
   
   /** The bordered numbers strip from the Lantern site. Columns stack on small screens. */
   function StatGroup({ className, ...props }: React.ComponentProps<"dl">) {
     return (
       <dl
         data-slot="stat-group"
         className={cn(
           "grid grid-cols-1 divide-y divide-border rounded-lg border bg-card sm:auto-cols-fr sm:grid-flow-col sm:grid-cols-none sm:divide-x sm:divide-y-0",
           className,
         )}
         {...props}
       />
     );
   }
   
   function Stat({ className, ...props }: React.ComponentProps<"div">) {
     return (
       <div data-slot="stat" className={cn("flex flex-col-reverse gap-1.5 px-6 py-5", className)} {...props} />
     );
   }
   
   function StatValue({ className, ...props }: React.ComponentProps<"dd">) {
     return (
       <dd
         data-slot="stat-value"
         className={cn("font-display text-4xl leading-none font-medium tracking-tight text-primary tabular-nums", className)}
         {...props}
       />
     );
   }
   
   function StatLabel({ className, ...props }: React.ComponentProps<"dt">) {
     return <dt data-slot="stat-label" className={cn("text-sm text-muted-foreground", className)} {...props} />;
   }
   
   export { StatGroup, Stat, StatValue, StatLabel };

2. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { StatGroup, Stat, StatValue, StatLabel } from "@/components/ui/stat";

<StatGroup>
  <Stat>
    <StatLabel>sites on the network</StatLabel>
    <StatValue>128</StatValue>
  </Stat>
</StatGroup>

StatGroup renders a description list. Put StatLabel before StatValue in the markup so screen readers read the term first; the value is shown on top visually.