Stats 2

Displays a section with cards showing stats, icons, and trends. Each card has a value, label, description, and a trend indicator. Renders when data is provided, typically used to highlight key metrics in a visually engaging way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/stats-2

npx layro-cli add @educlopez/stats-2

npx layro-cli add @educlopez/stats-2

bunx layro-cli add @educlopez/stats-2

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { DollarSign, Smartphone, Star, Users } from "lucide-react";
import { motion, useInView, useReducedMotion } from "motion/react";
import React, { useRef } from "react";

const STAGGER_DELAY = 0.1;
const ICON_STAGGER_OFFSET = 0.2;
const VALUE_DELAY_OFFSET = 0.3;
const TREND_STAGGER_OFFSET = 0.5;

interface StatsCardsProps {
  description?: string;
  stats?: Array<{