數據計數主視覺｜免費 React 元件

暗色主視覺 React 元件：左對齊大標題下方一列 2–4 個關鍵數字，進入視口時分隔線先描出、數字依序從 0 計數到終值，完成後畫出強調色短底線。

適合年度回顧、產品首頁或募資頁的第一屏：左對齊的編輯感大標題與副標，下方一列 2–4 個關鍵數字。數字列進入視口時，格間細線先描出，數字以 easeOut 依序從 0 計數到終值（每格間隔 150ms），計數完成後在數字下方畫出一道強調色短底線。右上角有一團低透明度的強調色徑向光暈，全部用 CSS 繪製、不需要圖片。預設永遠暗色，也可以切到 auto 跟隨網站主題。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add count-up-stats-hero

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

表面surface

計數時長（ms）countDuration

1600

數字數量statCount

進場時長（ms）duration

600

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<CountUpStatsHero/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/count-up-stats-hero.json

或在 components.json 設定 registries 後，改用 @webberui/count-up-stats-hero 安裝。

使用

import { CountUpStatsHero } from "@/components/ui/count-up-stats-hero";

<CountUpStatsHero
  eyebrow="2026 年度回顧"
  title="三百間門市，用同一份班表開店。"
  subtitle="排班、調班與工時試算放在同一個畫面。"
  primaryAction={{ label: "預約導入說明", href: "/contact" }}
  secondaryAction={{ label: "看客戶案例", href: "/cases" }}
  stats={[
    { value: 320, suffix: "+", label: "合作門市", note: "分布在 14 個縣市" },
    { value: 12.6, decimals: 1, suffix: "萬", label: "每月排出的班次" },
    { value: 38, suffix: "%", label: "排班工時下降", note: "導入三個月中位數" },
  ]}
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`stats`	`CountUpStat[]`	—	關鍵數字，建議 2–4 個；超過 4 個只顯示前 4 個
`eyebrow`	`ReactNode`	—	標題上方的小標
`subtitle`	`ReactNode`	—	副標題，最寬 `max-w-xl`
`as`	`"h1" \| "h2"`	`"h1"`	標題層級；頁面已有 h1 時改用 h2
`primaryAction`	`CountUpStatsHeroAction`	—	主要 CTA，底色為強調色
`secondaryAction`	`CountUpStatsHeroAction`	—	次要 CTA，外框樣式
`surface`	`"dark" \| "auto"`	`"dark"`	`dark` 永遠暗色；`auto` 跟隨網站亮暗主題
`minHeight`	`number`	`560`	區塊最小高度（px）
`duration`	`number`	—	標題區進場時長（ms），寫入 `--wb-count-up-stats-hero-duration`；省略時為 600ms
`countDuration`	`number`	—	數字計數時長（ms），寫入 `--wb-count-up-stats-hero-count`；省略時為 1600ms
`locale`	`string`	`"zh-TW"`	數字格式的語系（`Intl.NumberFormat`）
`onCountComplete`	`() => void`	—	所有數字計數完成時回呼
`className`	`string`	—	併入根 `section`

CountUpStat

欄位	型別	預設值	說明
`value`	`number`	—	目標數值，計數從 0 開始
`label`	`string`	—	數字下方的小標籤
`prefix`	`string`	—	數字前綴（例如 `+`、`NT$`）
`suffix`	`string`	—	數字後綴（例如 `+`、`%`、`萬`）
`decimals`	`number`	`0`	小數位數，計數過程與終值都維持這個位數
`note`	`string`	—	標籤下方的一句說明

CountUpStatsHeroAction

欄位	型別	預設值	說明
`label`	`string`	—	按鈕文字
`href`	`string`	—	有值時渲染為連結，否則為 `type="button"`
`onClick`	`() => void`	—	點擊回呼

細節

節奏：分隔線 400ms 先描出（窄螢幕為水平線 scaleX、md 以上為垂直線 scaleY），接著數字計數；每格錯開 150ms。計數用 requestAnimationFrame 加 easeOut 曲線 1-(1-t)^3，並以 Intl.NumberFormat 固定小數位數，計數過程不會跳出多餘的小數。
計數只在數字列第一次進入視口時播放一次。標題區（eyebrow、標題、副標、CTA）在進入視口時依序上移淡入，間隔 80ms。
CSS 變數：--wb-count-up-stats-hero-duration（標題區進場，600ms）、--wb-count-up-stats-hero-count（計數，1600ms）、--wb-count-up-stats-hero-divider（分隔線與底線，400ms）、--wb-count-up-stats-hero-ease（進場曲線，cubic-bezier(0.22,1,0.36,1)）。計數時長在開始時讀取計算後的 CSS 變數，所以全域覆寫也會同步影響 JS 計數。
強調色用 --wb-count-up-stats-hero-accent 覆寫；未設定時暗色表面為 #2dd4bf，auto 亮色主題為 #0d9488。光暈、主按鈕底色、eyebrow 圓點與完成底線都跟著它。

可及性

根元素是 section，以 aria-labelledby 指向標題；標題層級可用 as 改為 h2，避免一頁出現多個 h1
每個數字容器的 aria-label 直接是終值（含前後綴），計數中的文字設 aria-hidden，螢幕閱讀器不會念出中途的數字
分隔線、光暈與底線都是裝飾，設 aria-hidden
CTA 有 href 時是原生連結，否則是 type="button"；兩者都有 focus-visible 外框
使用者系統開啟「減少動態效果」時，不計數、數字與分隔線直接呈現終態，標題區改為 150ms 淡入

數據計數主視覺

把這個效果裝進你的專案

本頁目錄