Sticky Stats Scroller

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/feature/feature90.tsx instead.

Usage

The file also exports feature90Demo, 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 { Feature90, feature90Demo } from "@/components/blocks/feature/feature90";

export default function Page() {
  return <Feature90 {...feature90Demo} />;
}

Props

Types

interface StickyStat {
  value: string;
  label: string;
}

interface StickyScrollerFeature {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

• Fully static Server Component: no event handlers, no client state. The pinned stats panel is pure CSS (`lg:sticky lg:top-24 lg:self-start`), not JavaScript-driven scroll tracking.
• Below the `lg` breakpoint the stats panel and card column stack vertically and the sticky behavior has no visible effect, since there isn't enough side-by-side height for it to matter.
• No full-bleed background photo here, unlike this batch's other feature84-88 blocks; the section uses the plain `bg-background` page-section convention.
• Each card accepts its own icon component reference directly, which is safe here since this is a Server Component (not "use client").