MetricCard

metriccard-1779393693002.tsx

'use client'
export default function MetricCard({
  title = 'Total Revenue',
  value = '$48,295',
  change = '+12.5%',
  positive = true,
  icon = '💰',
}) {
  return (
    <div style={{
      background: '#fff', borderRadius: '14px', padding: '20px',
      boxShadow: '0 2px 16px rgba(0,0,0,0.06)', minWidth: '200px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '14px' }}>
        <div style={{ fontSize: '13px', fontWeight: 500, color: '#64748b' }}>{title}</div>
        <div style={{
          width: '38px', height: '38px', borderRadius: '10px',
          background: 'linear-gradient(135deg,#6d28d9,#2563eb)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px',
        }}>{icon}</div>
      </div>
      <div style={{ fontSize: '28px', fontWeight: 800, color: '#1e293b', marginBottom: '8px' }}>{value}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
        <span style={{ color: positive ? '#10b981' : '#ef4444', fontSize: '13px', fontWeight: 600 }}>
          {positive ? '↑' : '↓'} {change}
        </span>
        <span style={{ color: '#94a3b8', fontSize: '12px' }}>vs last month</span>
      </div>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Dashboard metric card with trend indicator and sparkline

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards