# Options chain

A React component in [Beamline](https://beamline.io/)'s [Trading](https://beamline.io/components/trading) category. Live demo: https://beamline.io/components/options-chain

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](https://beamline.io/components/order-book)).
- Open positions ([positions-table](https://beamline.io/components/positions-table)).
- Placing the order itself ([order-ticket](https://beamline.io/components/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

- [chip-group](https://beamline.io/components/chip-group)
- [segmented-control](https://beamline.io/components/segmented-control)
- button

## Dependencies

`lucide-react`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Trading

- [Price chart](https://beamline.io/components/price-chart): Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- [Market heatmap](https://beamline.io/components/market-heatmap): Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- [Order book](https://beamline.io/components/order-book): Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- [Depth chart](https://beamline.io/components/depth-chart): Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- [Ticker tape](https://beamline.io/components/ticker-tape): A continuously scrolling row of symbols with price, change and mini trend; anyone can hold it: hover, keyboard focus or a tap.
- [Watchlist](https://beamline.io/components/watchlist): A selectable, sortable list of markets with mini trends, prices, changes and stars.
- [Trades tape](https://beamline.io/components/trades-tape): Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- [Order ticket](https://beamline.io/components/order-ticket): Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- [Swap form](https://beamline.io/components/swap-form): Exchange one token for another: type what you pay (or Max), pick each token from a searchable list with balances, and the form quotes what you receive…
- [Positions table](https://beamline.io/components/positions-table): Open positions with live unrealised PnL, liquidation warnings and close actions.
- [P&L calendar](https://beamline.io/components/pnl-calendar): A trader's month at a glance: every trading day's profit or loss in its cell, shaded deeper the bigger it was in the gain or loss colour and marked ▲ or…
- [Price ticker](https://beamline.io/components/price-ticker): Symbol, last price with a directional flash, 24h change and stats.
- [Funding countdown](https://beamline.io/components/funding-countdown): Perpetual funding rate with who pays, and a live countdown ring to the next funding.