StatList

statlist-1779393693138.tsx

'use client'
const STATS = [
  { label: 'Active Users', value: '12,847', trend: '+8.2%', up: true, icon: '👥' },
  { label: 'Conversion Rate', value: '3.24%', trend: '+0.5%', up: true, icon: '📊' },
  { label: 'Avg. Session', value: '4m 32s', trend: '-12s', up: false, icon: '⏱️' },
  { label: 'Bounce Rate', value: '42.1%', trend: '-2.3%', up: true, icon: '🎯' },
]

export default function StatList({ stats = STATS }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', background: '#fff', borderRadius: '14px', overflow: 'hidden', boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
      {stats.map((stat, i) => (
        <div key={stat.label} style={{
          display: 'flex', alignItems: 'center', gap: '14px',
          padding: '14px 18px',
          background: i % 2 === 0 ? '#fff' : '#fafbfc',
        }}>
          <div style={{
            width: '38px', height: '38px', borderRadius: '10px', background: '#f0f4ff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', flexShrink: 0,
          }}>{stat.icon}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: '12px', color: '#94a3b8' }}>{stat.label}</div>
            <div style={{ fontWeight: 700, fontSize: '17px', color: '#1e293b' }}>{stat.value}</div>
          </div>
          <div style={{ color: stat.up ? '#10b981' : '#ef4444', fontSize: '13px', fontWeight: 600 }}>
            {stat.up ? '↑' : '↓'} {stat.trend}
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryDashboard & App UI

Frameworkreact

TierFREE

Copies0

About

Vertical list of stats with icons, values and trend arrows

More from Dashboard & App UI

import React from 'react';

interface MetricCardProps {
  value: number;
  trend: 'up' | 'down';
  sparklineData: number[];
}

const MetricCard: React.FC<MetricCardProps> = ({ value, trend, sparklineData }) => {
  return (
    <div style={{ backgroun

MetricCard

Dashboard & App UI

import React from 'react';
import './ProgressRing.css';
interface ProgressRingProps {
  percentage: number;
}
const ProgressRing: React.FC<ProgressRingProps> = ({ percentage }) => {
  const circleDashArray = 2 * Math.PI * 50;
  const circleDashOffset

ProgressRing

Dashboard & App UI

'use client';

import React from 'react';

interface KPIWidgetProps {
  metric: number;
  label: string;
  target: number;
  progress: number;
  sparklineData: number[];
  periodComparison: string;
}

const KPIWidget: React.FC<KPIWidgetProps> = ({

KPIWidget

Dashboard & App UI

'use client'
import { useState, useEffect, useRef } from 'react'

const METRICS = [
  { label: 'Monthly Revenue', value: 48320, prev: 41200, prefix: '$', suffix: '', color: '#C9A84C', data: [22,28,24,32,28,38,35,42,40,48] },
  { label: 'Active Users'

KPICards

Dashboard & App UI