Data
Matchup
shadcn add @detent-pro/radar
Matchup is in Pro. So is everything else.
19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.
Change one and the preview follows.
axesstring[]RequiredseriesRadarSeries[]RequiredtitlestringinitialPair[string, string]format(v: number) => string(v) => `${Math.round(v * 100)}`onPair(pair: [string, string]) => voidThrough a ref: pair(), axis()
usage.tsx
<RadarCompareaxes={axes}series={series}title="Models, head to head"/>
A whole page, ready to paste.
page.tsx
"use client"
import { RadarCompare } from "@/components/detent/components/viz/RadarCompare"
import type { RadarSeries } from "@/components/detent/components/viz/RadarCompare"
const axes = ["Speed", "Accuracy", "Cost", "Context", "Tools"]
const series: RadarSeries[] = [
{ id: "fast", label: "Fast model", hue: 250, values: [0.95, 0.7, 0.9, 0.55, 0.65] },
{ id: "deep", label: "Deep model", hue: 25, values: [0.55, 0.96, 0.4, 0.92, 0.88] },
{ id: "small", label: "Small model", hue: 150, values: [0.98, 0.55, 0.97, 0.35, 0.4] },
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[520px]">
<RadarCompare
title="Compare models"
axes={axes}
series={series}
initialPair={["fast", "deep"]}
onPair={(pair) => console.log(pair)}
/>
</div>
</main>
)
}