Benchmark Grid
A responsive benchmark leaderboard grid for product and AI eval results.
Saved preference for
elorm init --ui-library base-ui#1 on App Bench
elorm
76%
Claude Code
68%
v0
64%
Bolt
54%
Google AI Studio
50%
Codex CLI
38%
Replit
34%
Cursor
27%
Score
PreviewCode
import { BenchmarkGrid } from "@/components/blocks/benchmark-grid"
export function BenchmarkGridDemo() {
return <BenchmarkGrid />
}
Installation#
Usage#
import { BenchmarkGrid } from "@/components/blocks/benchmark-grid"A responsive benchmark leaderboard grid for product and AI eval results.
Use for benchmark leaderboards, model comparisons, launch claims, or scorecards. Pass custom benchmarks to replace the default App Bench and UI Bench data.
Composition#
Benchmark Grid
├── BenchmarkGrid
├── BenchmarkCardExamples#
Custom benchmark#
#1 on Support Bench
elorm
92%
Baseline
76%
Score
PreviewCode
import { BenchmarkGrid } from "@/components/blocks/benchmark-grid"
export function BenchmarkGridDemo() {
return (
<BenchmarkGrid benchmarks={[{ title: "#1 on Support Bench", entries: [{ label: "Acme AI", value: 92, displayValue: "92%", highlighted: true }, { label: "Baseline", value: 76, displayValue: "76%" }], domain: [0, 100], ticks: ["0%", "50%", "100%"] }]} />
)
}