台股報價卡｜免費 React 元件

台股慣例的股票報價卡 React 元件：紅漲綠跌、漲跌停鎖死配色、價格逐位滾動與變動閃動、漲跌幅徽章、開高低昨收、成交量條與五檔簡表，資料完全由 props 供給。

台股「紅漲綠跌」與國際慣例相反，是在地化時最容易踩到的坑。這張報價卡把台股看盤的視覺慣例整包做好：上漲紅、下跌綠、平盤灰；漲跌幅達 ±10%（可調）時整塊實色鎖死並標上「漲停／跌停」徽章；主價格逐位滾動（上漲新字由下往上進場），價格每次變動卡片背景還會依方向閃一下。下方是開高低昨收四格、成交量橫條，以及可展開的五檔簡表——買盤紅色長條向右生長、賣盤綠色向左，中線顯示現價。資料完全由 props 供給，接上你的行情源後只要更新 quote.price 即可。

把這個效果裝進你的專案

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

npx webberui@latest add tw-stock-quote-card

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

Playground

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

顯示五檔showLevels

精簡模式compact

漲跌停幅度（%）limitPct

上漲顏色upColor

下跌顏色downColor

import * as React from "react";

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

編輯中的呼叫預設屬性

<TwStockQuoteCard/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/tw-stock-quote-card.json

或在 components.json 設定 registries 後，改用 @webberui/tw-stock-quote-card 安裝。

使用

import { TwStockQuoteCard } from "@/components/ui/tw-stock-quote-card";

<TwStockQuoteCard
  quote={{
    symbol: "3141",
    name: "虛構半導體", // 示範用假資料，非真實公司
    price: 1085,
    prevClose: 1050,
    open: 1060,
    high: 1090,
    low: 1055,
    volume: 32180,
    time: "13:30:00",
  }}
  levels={{
    bids: [
      { price: 1080, size: 168 },
      { price: 1075, size: 315 },
      // ……共五檔
    ],
    asks: [
      { price: 1085, size: 132 },
      { price: 1090, size: 276 },
      // ……共五檔
    ],
  }}
  showLevels
  maxVolume={80000}
  onPriceChange={(event) => console.log(event.direction, event.price)}
/>

Props

Prop	型別	預設值	說明
`quote`	`StockQuote`	—	報價資料：代號、名稱、現價、昨收與可選的開高低量與時間
`levels`	`OrderBookLevels`	—	五檔委買委賣資料；需搭配 `showLevels` 才會顯示
`limitPct`	`number`	`10`	漲跌停幅度（%），漲跌幅達 ±limitPct 時鎖死漲停／跌停樣式
`showLevels`	`boolean`	`false`	是否顯示五檔簡表
`compact`	`boolean`	`false`	精簡模式：縮小價格字級並隱藏開高低昨收與成交量列
`maxVolume`	`number`	—	成交量長條的滿刻度（張）；未提供時以自身成交量為滿刻度（長條全滿）
`upColor`	`string`	—	覆寫上漲顏色（預設紅色，台股慣例），接受任何 CSS 顏色字串
`downColor`	`string`	—	覆寫下跌顏色（預設綠色，台股慣例），接受任何 CSS 顏色字串
`onPriceChange`	`(event: PriceChangeEvent) => void`	—	`price` 變動時回呼，同時卡片背景依方向閃動一下
`className`	`string`	—	透傳到最外層容器

StockQuote

欄位	型別	預設值	說明
`symbol`	`string`	—	股票代號
`name`	`string`	—	股票名稱
`price`	`number`	—	目前成交價
`prevClose`	`number`	—	昨日收盤價，漲跌與漲跌幅以此為基準
`open`	`number`	—	開盤價（可選）
`high`	`number`	—	盤中最高價（可選）
`low`	`number`	—	盤中最低價（可選）
`volume`	`number`	—	成交量（張，可選）
`time`	`string`	—	報價時間文字（可選）

OrderBookLevels

欄位	型別	預設值	說明
`bids`	`OrderBookLevel[]`	—	委買五檔，建議依價格由高到低排列（最多取前五筆）
`asks`	`OrderBookLevel[]`	—	委賣五檔，建議依價格由低到高排列（最多取前五筆）

OrderBookLevel

欄位	型別	預設值	說明
`price`	`number`	—	掛單價格
`size`	`number`	—	掛單量（張）

PriceChangeEvent

欄位	型別	預設值	說明
`price`	`number`	—	變動後的價格
`previous`	`number`	—	變動前的價格
`direction`	`"up" \| "down"`	—	變動方向

另外具名匯出 priceTone(change)（判斷漲跌色調）、formatTwPrice(value)（zh-TW 千分位兩位小數格式化），以及 StockQuote、OrderBookLevels、OrderBookLevel、PriceChangeEvent、PriceTone 型別。

細節

紅漲綠跌是台股（與陸港股）慣例，與美股等國際市場相反。要改回國際慣例，把 upColor 設成綠色、downColor 設成紅色即可（例如 upColor="#16a34a"、downColor="#dc2626"），淡染背景與五檔長條會用 color-mix 自動跟著換色
漲跌幅（相對 prevClose）達到 ±limitPct 時進入鎖死狀態：價格底色整塊實色、加上「漲停／跌停」徽章，對應台股的漲跌停板制度（現行為 10%）
元件不連任何行情源，資料完全由 props 供給；接上 WebSocket 或輪詢後，更新 quote 即可觸發逐位滾動、閃動與 onPriceChange 回呼
價格一律以 zh-TW 千分位、固定兩位小數顯示；逐位滾動的格子以「從右數」的位置編 key，位數增減（例如 999.95 → 1,000.00）時既有位不會整串重排
內建文字（開盤、最高、最低、昨收、成交量、委買、委賣、漲停、跌停）為繁體中文，貼齊台股看盤介面的用語

可及性

整卡為 role="group"，aria-label 含股票名稱與代號；逐位滾動的價格層為裝飾性內容，以 aria-hidden 隱藏
現價與漲跌另以 sr-only 的 aria-live="polite" 區域用完整文字宣告（含漲停／跌停狀態），螢幕閱讀器不會漏聽價格變化
五檔簡表的價量為真實文字內容，背後的量能長條與中線僅為裝飾並標記 aria-hidden
使用者系統開啟「減少動態效果」時，停用逐位滾動、背景閃動、五檔進場與長條生長動畫，狀態直接切換，數值與配色回饋完整保留

台股報價卡

把這個效果裝進你的專案

本頁目錄