Integrations · TradingView · Watchlists

Market sections

Watchlist widgets put a market overview in a panel: indices, FX, crypto and single names, with the provider's own session status and change calculations.

Market Summary

A dense market row — provider movers by default, or your own symbol groups.

MarketSummary

Web Component

Provider market movers, horizontal flow layout.

Provider docs

MarketSummary

Web Component

Your own sectors, grid layout, compact items.

Provider docs

Market Overview

A market sidebar with a chart for the selected instrument.

MarketOverview

Web Component

A sidebar of markets with a chart for the selected instrument.

Provider docs

Market Data

Global sections as a table, or as a performance heatmap.

MarketData

Web Component

Overview view.

Provider docs

MarketData

Web Component

Performance view with heatmap colouring.

Provider docs

World Market Summary

Country-level equity performance as a map or a list.

WorldMarketSummary

Web Component

Map view.

Provider docs

WorldMarketSummary

Web Component

List view, sorted by performance.

Provider docs

Sector attributes are JSON on the element, exactly as the provider's own snippet writes them. Luc UI's typed props serialise to that form, so a pasted provider snippet and a LUC component produce the same markup. symbol-sectors="[…]"

Usage

import { TradingViewMarketSummary } from "@luc/ui/tradingview";

<TradingViewMarketSummary
  mode="market-movers"
  assetsType="stocks"
  layoutMode="grid"
  height={220}
/>

The provider's mover row; switch to `mode="custom"` for your own sectors.

import { TradingViewMarketOverview } from "@luc/ui/tradingview";

<TradingViewMarketOverview symbolSectors={sectors} height={550} />

A market sidebar with the provider chart for the selected instrument.

import { TradingViewMarketData } from "@luc/ui/tradingview";

<TradingViewMarketData symbolSectors={sectors} view="performance" heatmap height={340} />

The same sections as a performance view with provider colour semantics.

import { TradingViewWorldMarketSummary } from "@luc/ui/tradingview";

<TradingViewWorldMarketSummary view="map" sort="performance" height={520} />

Country-level equity performance, shown as a map or a list.

Configuration

`symbolSectors` is an array of `{ sectionName, symbols }` records and is serialised as provider JSON. `timeFrame`, `itemSize`, `layoutMode` and `view` select the provider's reading, not a LUC data query.

Client and provider lifecycle

These are Web Components. Provide a bounded height, keep the page in a Client Component, and let the wrapper's lazy registration decide when the provider module is requested.

Limitations

The sections, quotes, market status and performance values come from TradingView. `symbolUrl` changes only symbol links; provider attribution remains outside that redirect.

Guidelines

Use a watchlist widget for a market board whose provider session status and change calculations are acceptable as-is.
Keep your symbol groups small enough for the chosen layout and give the grid a stable minimum height.

Don't

Do not label provider movers as your own screened universe; the provider chooses the list.
Do not nest an unbounded widget inside an auto-height row and expect the page to size it.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`TradingViewMarketData`	23 documented props	`({ symbolSectors, view, heatmap, symbolUrl, theme, ...base }: TradingViewMarketDataProps) => import("@types/react").JSX.Element`
`TradingViewMarketOverview`	24 documented props	`({ symbolSectors, exchange, mode, assetsType, itemSize, chartSize, timeFrame, hideMarketStatus, symbolUrl, theme, ...base }: TradingViewMarketOverviewProps) => import("@types/react").JSX.Element`
`TradingViewMarketSummary`	26 documented props	`({ symbolSectors, exchange, mode, assetsType, itemSize, timeFrame, showTimeRange, direction, hideMarketStatus, layoutMode, symbolUrl, theme, ...base }: TradingViewMarketSummaryProps) => import("@type…`
`TradingViewWorldMarketSummary`	23 documented props	`({ view, sort, hoverType, hideLegend, hideViewToggle, countries, focusedCountries, symbolUrl, theme, ...base }: TradingViewWorldMarketSummaryProps) => import("@types/react").JSX.Element`

TradingViewMarketSummary props

Type: TradingViewMarketSummaryProps

Values the compiler reads from the declaration.

TradingViewMarketSummary props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`assetsType?`	`TradingViewAssetType \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`direction?`	`TradingViewDirection \| undefined`	`—`
`exchange?`	`string \| undefined`	`—`	Provider exchange filter, used by the market-movers mode.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideMarketStatus?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`itemSize?`	`TradingViewItemSize \| undefined`	`—`
`layoutMode?`	`"grid" \| "flow" \| undefined`	`—`
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`mode?`	`TradingViewMarketMode \| undefined`	`—`
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`showTimeRange?`	`boolean \| undefined`	`—`
`symbolSectors?`	`readonly TradingViewSymbolSector[] \| undefined`	`—`	Symbol groups rendered as provider tabs.
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeFrame?`	`string \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…

TradingViewMarketData props23 props

TradingViewMarketData props

Type: TradingViewMarketDataProps

Values the compiler reads from the declaration.

TradingViewMarketData props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`assetsType?`	`TradingViewAssetType \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`exchange?`	`string \| undefined`	`—`	Provider exchange filter, used by the market-movers mode.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`heatmap?`	`boolean \| undefined`	`—`
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`itemSize?`	`TradingViewItemSize \| undefined`	`—`
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`mode?`	`TradingViewMarketMode \| undefined`	`—`
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`symbolSectors?`	`readonly TradingViewSymbolSector[] \| undefined`	`—`	Symbol groups rendered as provider tabs.
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…
`view?`	`"overview" \| "performance" \| undefined`	`—`

TradingViewMarketOverview props24 props

TradingViewMarketOverview props

Type: TradingViewMarketOverviewProps

Values the compiler reads from the declaration.

TradingViewMarketOverview props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`assetsType?`	`TradingViewAssetType \| undefined`	`—`
`chartSize?`	`"compact" \| "normal" \| "large" \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`exchange?`	`string \| undefined`	`—`	Provider exchange filter, used by the market-movers mode.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideMarketStatus?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`itemSize?`	`TradingViewItemSize \| undefined`	`—`
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`mode?`	`TradingViewMarketMode \| undefined`	`—`
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`symbolSectors?`	`readonly TradingViewSymbolSector[] \| undefined`	`—`	Symbol groups rendered as provider tabs.
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeFrame?`	`string \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…

TradingViewWorldMarketSummary props23 props

TradingViewWorldMarketSummary props

Type: TradingViewWorldMarketSummaryProps

Values the compiler reads from the declaration.

TradingViewWorldMarketSummary props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`countries?`	`readonly string[] \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`focusedCountries?`	`readonly string[] \| undefined`	`—`
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideLegend?`	`boolean \| undefined`	`—`
`hideViewToggle?`	`boolean \| undefined`	`—`
`hoverType?`	`"chart" \| "performance-grid" \| "chart-performance-grid" \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`sort?`	`"performance" \| "alphabetical" \| undefined`	`—`
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…
`view?`	`"map" \| "list" \| undefined`	`—`