Card

Cards 168

About

Analytics Card This component encapsulates the entire visual element, including the header, total amount, and the animated bar chart. It is designed to be highly reusable and theme-adaptive.

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

Code

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

Usage.tsx

import { AnalyticsCard } from '@/components/ui/card';
import { ArrowUpRight } from 'lucide-react'; // Example icon from lucide-react

// --- DEMO COMPONENT ---
// Provides a clean, centered preview of the AnalyticsCard.
const AnalyticsCardDemo = () => {
  // Sample data to be passed into the component via props.
  const sampleAnalyticsData = [
    { label: 'Mon', value: 64 },
    { label: 'Tue', value: 52 },
    { label: 'Wed', value: 46 },
  ];

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <AnalyticsCard
        title="Analytics"
        totalAmount="$242,63"
        icon={<ArrowUpRight className="h-4 w-4 text-muted-foreground" />}
        data={sampleAnalyticsData}
      />
    </div>
  );
};

export default AnalyticsCardDemo;