Neomorphism Metric Card

Component 87

About

A stunning Neomorphism style metric card featuring soft dynamic shadows, positive/negative trend indicators, and premium Framer Motion hover animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Neomorphism Metric Card to your project and fits it to your theme.

Code

How Neomorphism Metric Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { TrendingUp, TrendingDown, DollarSign } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { motion } from 'framer-motion';

export default function Demo() {
  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-[#e0e5ec] dark:bg-[#2a2d32] p-8 transition-colors duration-300">
      <MetricCard
        title="Total Revenue"
        value="$124,563"
        trend={13}
        icon={DollarSign}
      />
    </div>
  );
}

export interface MetricCardProps {
  title: string;
  value: string;
  trend: number;
  icon: LucideIcon;
  trendLabel?: string;
}

export function MetricCard({ title, value, trend, icon: Icon, trendLabel = "vs last month" }: MetricCardProps) {
  const isPositive = trend >= 0;
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="p-8 rounded-3xl bg-[#e0e5ec] dark:bg-[#2a2d32] 
        shadow-[9px_9px_16px_rgba(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)] 
        dark:shadow-[9px_9px_16px_rgb(28,30,34),-9px_-9px_16px_rgb(56,60,66)] 
        w-full max-w-md flex flex-col gap-6 transition-colors duration-300"
    >
      <div className="flex justify-between items-start">
        <div className="flex flex-col gap-1">
          <h3 className="text-[#4a5568]/70 dark:text-gray-400 font-medium uppercase tracking-wider text-sm transition-colors duration-300">
            {title}
          </h3>
          <h2 className="text-[#4a5568] dark:text-gray-100 font-bold text-4xl tracking-tight transition-colors duration-300">
            {value}
          </h2>
        </div>
        
        {/* Neomorphic Icon Container */}
        <div className="p-4 rounded-full 
          shadow-[inset_3px_3px_6px_0_rgba(163,177,198,0.7),inset_-3px_-3px_6px_0_rgba(255,255,255,0.8)] 
          dark:shadow-[inset_3px_3px_6px_0_rgb(28,30,34),inset_-3px_-3px_6px_0_rgb(56,60,66)] 
          text-[#4a5568]/80 dark:text-gray-300 bg-[#e0e5ec] dark:bg-[#2a2d32] 
          flex items-center justify-center transition-colors duration-300"
        >
          <Icon size={24} strokeWidth={2} />
        </div>
      </div>
      <div className="flex items-center gap-3">
        {/* Neomorphic Trend Badge */}
        <div 
          className={`flex items-center gap-1 px-3 py-1.5 rounded-full 
            shadow-[inset_3px_3px_6px_0_rgba(163,177,198,0.7),inset_-3px_-3px_6px_0_rgba(255,255,255,0.8)] 
            dark:shadow-[inset_3px_3px_6px_0_rgb(28,30,34),inset_-3px_-3px_6px_0_rgb(56,60,66)] 
            text-sm font-semibold transition-colors duration-300
            ${isPositive ? 'text-green-500 dark:text-green-400' : 'text-red-500 dark:text-red-400'}
          `}
        >
          {isPositive ? <TrendingUp size={16} /> : <TrendingDown size={16} />}
          <span>{Math.abs(trend)}%</span>
        </div>
        <span className="text-[#4a5568]/60 dark:text-gray-500 text-sm font-medium transition-colors duration-300">
          {trendLabel}
        </span>
      </div>
    </motion.div>
  );
}