Options chain

A React component in Beamline's Trading category.

Calls and puts for one expiry around a centre column of strikes: bid, ask, implied volatility, delta, volume and open interest, the money shaded in, a spot line that moves through the strikes as the price ticks, and quotes that flash as they change; clicking a bid sells and an ask buys, and the chosen legs add up to a net debit or credit.

Use it for

Choosing an option to trade: comparing strikes and both rights for one expiry, live.
Building a spread: several legs picked from the chain, with their net cost.

Not for

The book of one instrument (order-book).
Open positions (positions-table).
Placing the order itself (order-ticket takes the leg's price).

Anatomy

root: a size container that fills the height it is given; the rows scroll under a sticky header
toolbar: expiries as chips (date, days to go, a Weekly / Monthly tag; extra ones fold into +N), the underlying's spot with its tick flash, and Calls · Both · Puts
header: Calls and Puts over their columns, mirrored about Strike in the middle
row: per side open interest, volume, IV, delta, bid, ask; the strike in the centre; in-the-money cells shaded (calls below the spot, puts above it)
bid and ask: buttons; a bid sells, an ask buys; a chosen leg is ringed and marked S or B
spot line: a rule between the two strikes the spot sits between, with the price on it; it moves as the spot crosses a strike
legs bar (when legs are chosen): how many, each leg in words, the net debit or credit, Clear
unmeasured: a quote nobody is making is hatched, never 0

Variants

view: both, calls, puts
density: compact, default

States

live (quotes flash up or down as they change)
legs chosen
no quote (hatched)
empty (no strikes for this expiry)
single side (forced under 28rem)

Keyboard

The chain is one tab stop (a grid): ↑/↓ move between strikes, ←/→ between the bid and ask cells of both sides
Home/End go to the first and last cell of the row; Ctrl+Home/End to the first and last strike
Enter or Space adds the focused leg, or takes it away again
Expiries and the view switch are their own tab stops before the grid

Motion

Quotes that change tint up or down for an instant and fade (the shared price flash), never move. The spot line slides to its new gap between strikes; rows never travel. A chosen leg's ring scales in and the legs bar rises in; the net figure rolls to its new value. Changing the expiry cross-fades the rows and keeps the spot line in view. Reduced motion: no slide, flashes as a still tint.

Props

Prop	Type	Default	Description
`strikes` (required)	`OptionStrike[]`	—	{ strike, call: OptionQuote \| null, put: OptionQuote \| null } from @/lib/market, lowest strike first.
`spot`	`number \| null`	—	The underlying's price: places the spot line and shades the money.
`symbol`	`string`	—	The underlying, said in the toolbar and in each leg's name.
`expiries / expiry / defaultExpiry / onExpiryChange`	`OptionExpiry[] / string`	—
`view / defaultView / onViewChange`	`"both" \| "calls" \| "puts"`	—
`selected / defaultSelected / onSelectedChange`	`OptionLeg[]`	—	The chosen legs.
`decimals`	`number`	—	Price precision. Default 2.
`density`	`"compact" \| "default"`	—	28 or 32 px rows.
`className / classNames / style / ref`	`root`	—

Built from

Dependencies

lucide-react

Import

import { OptionsChain } from "@/components/options-chain/options-chain";

Get it

Options chain 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