Animated Stats & Value Cards

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about25.tsx instead.

Usage

The file also exports about25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { About25, about25Demo } from "@/components/blocks/about/about25";

export default function Page() {
  return <About25 {...about25Demo} />;
}

Props

Types

type StatItem = { title: string; value: string; percent?: number };

type ValueCard = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Behavior notes

• The 'animated' accent bar under each stat is a static bar whose width is set from the stat's percent field (defaulting to 100); this is a server component with no scroll-triggered count-up, unlike what the name might suggest.
• The hover-lift on value cards is a plain CSS hover:-translate-y-1 transition, not a JS/Framer effect, keeping this a server component like every other About block; About16's pillar cards have no hover treatment at all.
• Unlike About8, which puts stats in a single full-width 4-column row, stats here sit in a 2-column grid beside the intro text, with the value-card row as a fully separate section below.