Market screener

A React block (a whole screen) in Beamline's Blocks category.

The whole market at a glance and a way to narrow it down: a sector heatmap, today's top movers with the market's breadth, ready-made screens (gainers, losers, most active, your watchlist) and a live table to search, sort and star markets into the watchlist.

Use it for

The markets overview of a trading or investing app: what moved, where, and which markets to watch or open.
Finding markets by a few criteria and adding them to a watchlist.

Not for

Trading one market (trading-terminal).
Your own holdings and P&L (portfolio).
A sidebar market switcher (watchlist).

Anatomy

header: title, feed state (live, or how old the prices are), search, and the ready-made screens as chips with counts
heatmap: markets by sector, tile area by market cap, colour by the day's change; a tile picks the market
movers: top gainers and losers of the screen in view, each with its change in words and glyph, and the breadth (advancing, flat, declining) as one bar
table: star (watchlist), market, price, 24h change, 7-day trend, volume, market cap, sector; sortable, searchable; a row opens the market

Variants

0: room: heatmap above movers under 56rem, side by side from 56rem; the table keeps at least 22rem of height and the page scrolls past the overview on short screens

States

loading (heatmap, movers and table held in their shapes)
live
stale (prices older than a threshold: a warning chip says how old, values stay)
feed error (says so, Retry; the last prices stay, marked stale)
no matches for the search or screen (says which, clear)
empty watchlist (how to add)
unmeasured change or cap (hatched tile, — in the table)
Breadth counts only measured changes as up, flat or down and names the unmeasured market count separately.

Keyboard

Screens: arrow keys move between chips
Heatmap: arrow keys move between tiles, Enter picks
Table: arrows move between cells, Enter opens the row's market; the star is a toggle button
Search: / focuses it, Escape clears

Motion

Prices change in place each tick; the movers re-rank only when a market's place changes, and the change values roll. The star fills on a short spring. Live market rows never slide. Nothing animates between ticks.

Props

Prop	Type	Default	Description
`markets` (required)	`ScreenerMarket[]`	—	Ticker plus sector, market cap and volume; history for the 7-day trend.
`watchlist / defaultWatchlist / onWatchlistChange`	`string[]`	—	Starred symbols.
`screen / defaultScreen / onScreenChange`	`"all" \| "gainers" \| "losers" \| "active" \| "watchlist"`	—
`status`	`"loading" \| "live" \| "stale" \| "error"`	`"live"`
`updatedAt`	`number \| null`	—	When prices last arrived (ms); drives "12s old".
`onOpenMarket`	`(symbol: string) => void`	—	A heatmap tile or table row was chosen.
`onRetry`	`() => void`	—
`currency`	`string`	`"USD"`
`className / classNames / style / ref`	`string / MarketScreenerClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react, @tanstack/react-virtual

Import

import { MarketScreener } from "@/blocks/market-screener/market-screener";

Get it

Market screener is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent