Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/trend-cardimport { 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;