Trend Card

Cards 166

About

Interactive Trend Card A visually polished card component for displaying time-series data with an interactive bar chart. It's built to be responsive and theme-adaptive, using shadcn variables for styling.

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

Code

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

Usage.tsx

import { InteractiveTrendCard, TrendDataPoint } from '@/components/ui/trend-card';

const followerData: TrendDataPoint[] = [
  { month: '1', value: 520 },
  { month: '2', value: 550 },
  { month: '3', value: 580 },
  { month: '4', value: 553 },
  { month: '5', value: 520 },
  { month: '6', value: 520 },
  { month: '7', value: 550 },
  { month: '8', value: 580 },
  { month: '9', value: 553 },
  { month: '10', value: 520 },
  { month: '11', value: 520 },
  { month: '12', value: 550 },
];

const Demo = () => {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <InteractiveTrendCard
        title="Followers"
        subtitle="Trend"
        totalValue={587}
        newValue={116}
        chartData={followerData}
        // FIXED: Using distinct, hardcoded colors to demonstrate the props are working.
        defaultBarColor="#e5e7eb"      // A light, neutral gray
        barColor="#4f46e5"             // A vibrant indigo for the hovered bar
        adjacentBarColor="#a5b4fc"     // A lighter indigo for adjacent bars
      />
    </div>
  );
};

export default Demo;