Bento Stats

"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

const image =
  "https://images.unsplash.com/photo-1760978631841-f3754859ca59?w=900&q=80&auto=format&fit=crop"

export function BentoStats() {
  const [charge, setCharge] = React.useState(0)

  React.useEffect(() => {
    const timer = window.setTimeout(() => setCharge(50), 400)
    return () => window.clearTimeout(timer)
  }, [])

A dark bento grid of headline numbers: a full-bleed photo tile, two tiles with large gradient figures and a wide charging tile whose Progress bar fills when the section loads. Tiles stack on mobile and form a three-column grid on desktop. It always renders dark, whatever the site theme, which suits a dramatic stats or specs band on a product page.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/bento-stats

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks bento-stats

Manual

1. Add the pieces it builds on: Progress.

2. Copy the source into components/blocks/bento-stats.tsx:

"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

const image =
  "https://images.unsplash.com/photo-1760978631841-f3754859ca59?w=900&q=80&auto=format&fit=crop"

export function BentoStats() {
  const [charge, setCharge] = React.useState(0)

  React.useEffect(() => {
    const timer = window.setTimeout(() => setCharge(50), 400)
    return () => window.clearTimeout(timer)
  }, [])

3. Update the import paths to match your project.

Usage

import { BentoStats } from "@/components/blocks/bento-stats"

<BentoStats />

Edit the copy and figures inline and swap the photo in the image constant. The bar animates from 0 to 50 shortly after mount; change the target to match your claim.

Notes

The photo tile is a CSS background with no text alternative, so keep its heading meaningful. The image is an Unsplash placeholder.