The Anatomy of a Great Dashboard

Every successful analytics dashboard has the same core components. Master these 10 and you can build any dashboard quickly.

1. KPI Metric Card

The most common dashboard component. Shows a single metric with a label, current value, and change vs. previous period.

function MetricCard({ label, value, change, up }: MetricCardProps) {
  return (
    <div style={{ background: '#13161a', borderRadius: 12, padding: '16px 20px' }}>
      <p style={{ color: '#5c6370', fontSize: 12 }}>{label}</p>
      <p style={{ fontSize: 24, fontWeight: 800 }}>{value}</p>
      <p style={{ color: up ? '#00e5a0' : '#ff6b6b', fontSize: 12 }}>
        {up ? '↑' : '↓'} {change}
      </p>
    </div>
  );
}

2. Sparkline

A mini chart inside a KPI card. Shows the trend without taking up space.

3. Chart Container

A reusable wrapper that adds a title, optional actions, and loading/error states to any chart.

function ChartContainer({ title, children, loading }: Props) {
  return (
    <div style={{ background: '#13161a', borderRadius: 12, padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <h3 style={{ fontWeight: 700 }}>{title}</h3>
      </div>
      {loading ? <ChartSkeleton /> : children}
    </div>
  );
}

4. Data Table

Charts show trends; tables show exact values. Every dashboard needs both.

5. Date Range Picker

Let users select the time period for all charts. Always show: Today, Last 7 days, Last 30 days, Last 90 days, Custom.

6. Trend Badge

A small colored badge showing % change. Used inside KPI cards and table rows.

function TrendBadge({ value }: { value: number }) {
  const up = value >= 0;
  return (
    <span style={{
      background: up ? 'rgba(0,229,160,0.1)' : 'rgba(255,107,107,0.1)',
      color: up ? '#00e5a0' : '#ff6b6b',
      padding: '2px 8px', borderRadius: 4, fontSize: 12, fontWeight: 600
    }}>
      {up ? '+' : ''}{value}%
    </span>
  );
}

7. Chart Legend

Always position legends above or below charts (not to the right). Use custom legends for better styling.

8. Empty State

What shows when there's no data yet? Always design the empty state — it's often forgotten.

9. Skeleton Loader

A placeholder that matches the shape of the content while data loads. Reduces perceived loading time.

10. Tooltip

Custom tooltips that match your design system. The default Recharts tooltip is functional but ugly — always customize it.

All 10 of these components are available as free copy-paste code in the UIChart component library.

10 Must-Have React Dashboard UI Components in 2025