Bento 8 - Analytics with mini chartsPro

Analytics bento built from pure CSS charts: growing revenue bars, a horizontal funnel, country meters and a live visitor counter.

About Bento 8

Analytics bento built from pure CSS charts: growing revenue bars, a horizontal funnel, country meters and a live visitor counter.

Bento 8 is a pro bento block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 169 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
  • charts
  • bars
  • funnel
  • dashboard

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/bento-08

Dependencies installed automatically: lucide-react, motion.

Uses: motion-presets, number-ticker, reveal, use-reduced-motion, utils.

Usage

import Bento08 from "@/components/blocks/bento-08"

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

FAQ