Components
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.
npx shadcn@latest add https://21st.dev/r/kavikatiyar/cardLoading preview...
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;