Components
Loading preview...
Performance Benchmark Card This component provides a comprehensive view of a key metric against benchmarks and competitors. It's designed to be highly reusable, allowing you to feed it any data structure for titles, values, competitors, and performance levels.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/performance-benchmark-cardimport { PerformanceCard } from "@/components/ui/performance-benchmark-card";
import { Utensils, Sandwich, Bubbles, Banana } from "lucide-react";
export default function PerformanceCardDemo() {
const foodData = {
title: "Food",
headerIcon: <Utensils className="w-4 h-4" />,
mainValue: 1256,
percentageChange: 8.6,
benchmarkAverage: 960,
competitors: [
{
name: "Banana Shake",
value: 2292,
icon: <Banana className="w-4 h-4" />,
},
{
name: "Big Fernand",
value: 1694,
icon: <Sandwich className="w-4 h-4" />,
},
{
name: "Manhatt'n's Burgers",
value: 998,
icon: <Bubbles className="w-4 h-4" />,
},
],
performanceLevels: [
{ label: "0", value: 800, color: "bg-red-500" },
{ label: "800", value: 1100, color: "bg-orange-400" },
{ label: "1100", value: 1400, color: "bg-yellow-400" },
{ label: "+1400", value: 2500, color: "bg-green-500" },
],
};
return (
<div className="flex items-center justify-center h-full bg-background p-4">
<PerformanceCard
title={foodData.title}
headerIcon={foodData.headerIcon}
mainValue={foodData.mainValue}
percentageChange={foodData.percentageChange}
benchmarkAverage={foodData.benchmarkAverage}
competitors={foodData.competitors}
performanceLevels={foodData.performanceLevels}
/>
</div>
);
}