Hero 130 - Metric explorer chartPro

Hero above an explorable analytics card where switching metric and date range redraws an animated area chart and its headline number.

About Hero 130

Hero above an explorable analytics card where switching metric and date range redraws an animated area chart and its headline number.

Hero 130 is a hero block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 132 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.

  • analytics
  • chart
  • interactive
  • metrics
  • segmented

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add hero-130

Dependencies installed automatically: lucide-react, motion.

Uses: button, reveal, use-reduced-motion, utils.

Usage

import Hero130 from "@/components/blocks/hero-130"

export default function Page() {
  return <Hero130 />
}

FAQ