Integrations · TradingView · Patterns

Composed market pages

Three compositions that combine provider widgets into a page. The point is not the widgets — it is that the consumer owns the state that ties them together, not the provider.

Instrument detail

One selector drives four widgets. The selected symbol is React state in this page — @luc/ui ships no global symbol store, and no widget writes to it.

AdvancedChart

iframe

The price.

Provider docs

SingleTicker

Web Component

The quote.

Provider docs

TechnicalAnalysis

Web Component

The provider's read.

Provider docs

SymbolInfo

iframe

The facts.

Provider docs

TopStories

iframe

The context.

Provider docs

A fourth widget could sit under the chart — fundamental-data — at the cost of another iframe. The pattern is deliberately bounded: four to six embeds per page is a page; twelve is a network incident.

Crypto desk

A market-level composition: no single symbol, but the whole asset class.

CryptoHeatmap

iframe

The map.

Provider docs

CryptocurrencyMarket

iframe

The table.

Provider docs

AdvancedChart

iframe

BTC/USDT.

Provider docs

TopStories

iframe

Feed.

Provider docs

Macro panel

World equity performance, macro events and indicators — four widgets that would otherwise each need a data pipeline.

WorldMarketSummary

Web Component

Country performance.

Provider docs

EconomicMap

Web Component

One indicator, worldwide.

Provider docs

EconomicCalendar

iframe

What is coming.

Provider docs

MarketOverview

Web Component

What is trading.

Provider docs

Mixing lanes on one page

A provider chart and a LUC table inside the same LUC card.

Provider chart, LUC frame

Both are iframes, so both keep their own typography and their own attribution line. The LUC card supplies the surface, the spacing and the grid; the provider supplies the content. That is the whole contract.

Usage

import { TradingViewAdvancedChart, TradingViewSingleTicker, TradingViewSymbolInfo, TradingViewTopStories } from "@luc/ui/tradingview";

"use client";

import {
  TradingViewAdvancedChart,
  TradingViewSingleTicker,
  TradingViewSymbolInfo,
  TradingViewTopStories,
} from "@luc/ui/tradingview";

export function InstrumentPage({ symbol }: { symbol: string }) {
  return (
    <div className="grid gap-4">
      <TradingViewSingleTicker symbol={symbol} height={114} />
      <TradingViewAdvancedChart symbol={symbol} preset="standard" height={520} />
      <TradingViewSymbolInfo symbol={symbol} height={282} />
      <TradingViewTopStories
        feedMode="symbol"
        symbol={symbol}
        displayMode="compact"
        height={282}
      />
    </div>
  );
}

A complete instrument page: React owns the selected symbol, while each provider widget owns its own content.

Configuration

Use one application-level symbol value, cap the number of provider embeds per page, and put layout in Luc UI's grid or cards. The widgets do not share a provider store or selected-symbol event.

Client and provider lifecycle

The page must be a Client Component. Keep the symbol stable during hydration, give every provider surface a bounded height, and expect each widget to load its own provider module independently.

Limitations

Every widget on a composed page depends on TradingView's network and data. The pattern is a layout composition, not a data integration: LUC receives no quotes, news or chart series from these wrappers.

Guidelines

Use a composition when the provider's standard market views are the intended product experience.
Keep four to six embeds as a practical page budget and state which provider supplies each region.

Don't

Do not add a global provider symbol store; the selected instrument remains React state owned by the application.
Do not put every available widget on one page; network cost, loading states and competing chrome quickly dominate the reading.

Reference

Patterns composes public provider widgets. Their compiler-generated APIs are documented on the widget-family pages: