Taiwan Stock Quote Card

Taiwan's stock market colors run opposite to the international convention — red means up, green means down — and it is one of the easiest localization traps to fall into. This quote card packages the whole Taiwan-board look: red for gains, green for losses, neutral for flat; when the change reaches ±10% (configurable) the price block locks into a solid color with a Limit up (limit up) / Limit down (limit down) badge. The main price rolls digit by digit (on a rise, new digits enter from below), and the card background flashes in the tick's direction on every price change. Below sit open/high/low/previous-close cells, a volume bar, and an expandable 5-level order book — bid bars grow rightward in red, ask bars leftward in green, with the current price on the center line. All data comes in via props; once wired to your feed, just update quote.price.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

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>
  );
}

Installation

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

Usage

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

<TwStockQuoteCard
  quote={{
    symbol: "3141",
    name: "Fictional Semiconductor", // fictional demo data, not a real company
    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 },
      // ...five levels in total
    ],
    asks: [
      { price: 1085, size: 132 },
      { price: 1090, size: 276 },
      // ...five levels in total
    ],
  }}
  showLevels
  maxVolume={80000}
  onPriceChange={(event) => console.log(event.direction, event.price)}
/>

Props

StockQuote

OrderBookLevels

OrderBookLevel

PriceChangeEvent

priceTone(change) (resolves the up/down/flat tone), formatTwPrice(value) (zh-TW thousands grouping with two decimals), and the StockQuote, OrderBookLevels, OrderBookLevel, PriceChangeEvent, PriceTone types are also named exports.

How it works

• Red-up/green-down is the Taiwan (and mainland China / Hong Kong) convention, the opposite of US and most international markets. To switch back to the international convention, set upColor to a green and downColor to a red (for example upColor="#16a34a", downColor="#dc2626"); the tinted backgrounds and order-book bars follow automatically via color-mix
• When the change (relative to prevClose) reaches ±limitPct, the card enters the locked state: the price block turns solid and a Limit up (limit up) / Limit down (limit down) badge appears, mirroring Taiwan's daily price limit system (currently 10%)
• The component connects to no market feed — all data comes in via props; hook up a WebSocket or polling and updating quote drives the digit rolling, the flash and the onPriceChange callback
• Prices are always rendered with zh-TW thousands grouping and two fixed decimals; the rolling digit cells are keyed by their position counted from the right, so when the digit count changes (say 999.95 → 1,000.00) the existing digits keep their cells instead of reshuffling
• The built-in labels (Opening price open, Highest price high, Lowest price low, Previous closing price previous close, Trading volume volume, Buy orders bids, Sell orders asks, Limit up limit up, Limit down limit down) are Traditional Chinese, matching Taiwan quote-board wording

Accessibility

• The whole card is a role="group" with an aria-label containing the stock name and symbol; the rolling price layer is decorative and hidden with aria-hidden
• The current price and change are announced as full text through an sr-only aria-live="polite" region (including the limit-up/limit-down state), so screen readers never miss a price move
• The order book's prices and sizes are real text content; the size bars and the center line are decorative and marked aria-hidden
• When the user has "reduce motion" enabled at the system level, the digit rolling, background flash, order-book entrance and bar-growth animations are disabled — states switch instantly while all numeric and color feedback remains