中文數字滾動
數字以中文小寫/大寫/阿拉伯三種形式滾動切換，金額大寫自動轉換。
數字在阿拉伯、中文小寫、金額大寫三種格式間滾動切換：內建轉換器把 123456 轉為「十二萬三千四百五十六」或「壹拾貳萬參仟肆佰伍拾陸元整」，數值變動時逐位上下捲動（里程表式，未變動的單位字保持不動），切換格式時整組交叉淡變。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
10500
<CjkNumberRoller />
安裝
npx shadcn@latest add https://webberui.com/r/cjk-number-roller.json或在 components.json 設定 registries 後，改用 @webberui/cjk-number-roller 安裝。
安裝依賴後，從 registry JSON（/r/cjk-number-roller.json 的 files[0].content）複製 cjk-number-roller.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import {
CjkNumberRoller,
numberToChinese,
} from "@/components/ui/cjk-number-roller";
<CjkNumberRoller value={123456} format="arabic" prefix="NT$" />
<CjkNumberRoller value={123456} format="lower" />
<CjkNumberRoller value={123456} format="upper" className="text-4xl font-semibold" />
// 轉換器也可單獨呼叫
numberToChinese(123456, "lower"); // 十二萬三千四百五十六
numberToChinese(123456, "upper"); // 壹拾貳萬參仟肆佰伍拾陸Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 要顯示的數值，會被取整並鉗制為 0 ~ Number.MAX_SAFE_INTEGER |
format | CjkNumberFormat | "arabic" | 顯示格式：arabic（千分位阿拉伯數字）、lower（中文小寫）、upper（金額大寫） |
prefix | string | — | 數字前綴（如 NT$），以較小字級顯示在左側 |
animate | boolean | true | 是否啟用滾動動畫 |
currencySuffix | boolean | true | upper 格式是否自動附加「元整」 |
className | string | — | 透傳到外層容器 |
另外具名匯出純函式 numberToChinese(value, style)（style 為 "lower" 或 "upper"）：組間空位依慣例補「零」（10500 → 一萬零五百）、小寫開頭「一十」省略為「十」；單位表內建至「兆」，已涵蓋 JS 安全整數範圍。
可及性
- 完整格式化結果以
sr-only供螢幕閱讀器朗讀，逐位動畫字元對輔助科技隱藏（aria-hidden） - 使用者系統開啟「減少動態效果」或
animate設為false時，直接渲染靜態文字，不掛載任何動畫 - 動畫僅在客戶端掛載後啟動，SSR 首次輸出與客戶端一致，不會產生 hydration 差異