Hero 219 - Head-to-head benchmark scoreboardPro
"X vs Y" typographic header with both names set large around a small vs, followed by benchmark rows where paired bars race to their values and the multiplier is shown on the right.
About Hero 219
"X vs Y" typographic header with both names set large around a small vs, followed by benchmark rows where paired bars race to their values and the multiplier is shown on the right.
Hero 219 is a pro hero block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 101 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- comparison
- versus
- benchmark
- performance
- bars
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/hero-219Dependencies installed automatically: lucide-react, motion.
Uses: button, reveal, use-reduced-motion, utils.
Usage
import Hero219 from "@/components/blocks/hero-219"
export default function Page() {
return <Hero219 />
}