Integrations · TradingView · Symbol details

One instrument, four depths

Facts, provider-computed ratings, fundamentals and the company profile. LUC computes none of these values and stores none of them — they are TradingView's data, shown in Luc UI's layout.

Symbol Info

Price, ranges, market cap and valuation ratios.

SymbolInfo

iframe

Apple

Provider docs

SymbolInfo

iframe

Bitcoin

Provider docs

Technical Analysis

A Web Component with an interval selector and an optional score breakdown.

TechnicalAnalysis

Web Component

Gauge, single summary.

Provider docs

TechnicalAnalysis

Web Component

Gauge and breakdown at a daily interval.

Provider docs

Fundamental Data

Statements and ratios for one listed instrument.

FundamentalData

iframe

Income statement, balance sheet and cash-flow figures for one symbol.

Provider docs

Company Profile

What the company does, and where it sits.

CompanyProfile

Web Component

Company description, sector and key figures for one listed instrument.

Provider docs

A company profile is listed-instrument content: pass a crypto or FX symbol and the provider decides what it can say about it.

Usage

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

<TradingViewSymbolInfo symbol="NASDAQ:AAPL" height={282} />

The provider's key facts for one symbol.

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

<TradingViewTechnicalAnalysis
  symbol="NASDAQ:AAPL"
  interval="1D"
  ratingsDisplayMode="gauge-and-breakdown"
  height={425}
/>

The provider's technical rating, not a LUC signal calculation.

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

<TradingViewFundamentalData symbol="NASDAQ:AAPL" height={620} />

Statements and ratios in the provider's own iframe.

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

<TradingViewCompanyProfile symbol="NASDAQ:AAPL" height={530} />

Company description and classification for a listed instrument.

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

<TradingViewBrokerRating broker="sample" height={220} />

A partner rating module; the broker slug is part of its provider URL.

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

<TradingViewBrokerReviews broker="sample" showReviews height={420} />

The same partner module with its provider reviews surfaced.

Configuration

Most widgets require `symbol`. Technical analysis adds `interval`, `ratingsMode` and `ratingsDisplayMode`; the broker widgets require the provider's `broker` slug rather than a display name.

Client and provider lifecycle

The symbol-info and fundamental widgets are iframes; technical analysis, company profile and broker modules are Web Components. Mount them after hydration and keep a stable symbol while the provider is loading.

Limitations

Ratings, fundamentals, profiles and broker reviews are TradingView provider content. LUC neither computes nor stores them, and a broker widget is not an entitlement or an endorsement.

Guidelines

Use one symbol throughout a detail page and give each provider surface its own bounded section.
Name the provider in the surrounding copy when a rating or fundamental statement is part of a research narrative.

Don't

Do not present a provider technical rating as Luc UI's own recommendation.
Do not hard-code a broker slug into a generic template; it is a provider identity, not a label.

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
`TradingViewCompanyProfile`	17 documented props	`({ symbol, symbolUrl, theme, ...base }: TradingViewCompanyProfileProps) => import("@types/react").JSX.Element`
`TradingViewFundamentalData`	17 documented props	`({ symbol, displayMode, transparent, locale, theme, ...base }: TradingViewFundamentalDataProps) => import("@types/react").JSX.Element`
`TradingViewSymbolInfo`	16 documented props	`({ symbol, transparent, locale, theme, ...base }: TradingViewSymbolInfoProps) => import("@types/react").JSX.Element`
`TradingViewTechnicalAnalysis`	23 documented props	`({ symbol, interval, ratingsMode, ratingsDisplayMode, hideLogoAndName, hideIntervals, noLinks, symbolUrl, theme, ...base }: TradingViewTechnicalAnalysisProps) => import("@types/react").JSX.Element`
`TradingViewBrokerRating`	18 documented props	`({ broker, showBrokerName, showReviews, theme, ...base }: TradingViewBrokerRatingProps) => import("@types/react").JSX.Element`
`TradingViewBrokerReviews`	18 documented props	`({ broker, showBrokerName, showReviews, theme, ...base }: TradingViewBrokerReviewsProps) => import("@types/react").JSX.Element`

TradingViewSymbolInfo props

Type: TradingViewSymbolInfoProps

Values the compiler reads from the declaration.

TradingViewSymbolInfo 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.
`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.
`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…
`symbol`	`string`	`—`
`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…

TradingViewCompanyProfile props17 props

TradingViewCompanyProfile props

Type: TradingViewCompanyProfileProps

Values the compiler reads from the declaration.

TradingViewCompanyProfile 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.
`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.
`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…
`symbol`	`string`	`—`
`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…

TradingViewFundamentalData props17 props

TradingViewFundamentalData props

Type: TradingViewFundamentalDataProps

Values the compiler reads from the declaration.

TradingViewFundamentalData 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.
`displayMode?`	`"compact" \| "regular" \| "adaptive" \| undefined`	`—`
`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.
`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…
`symbol`	`string`	`—`
`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…

TradingViewTechnicalAnalysis props23 props

TradingViewTechnicalAnalysis props

Type: TradingViewTechnicalAnalysisProps

Values the compiler reads from the declaration.

TradingViewTechnicalAnalysis 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.
`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.
`hideIntervals?`	`boolean \| undefined`	`—`
`hideLogoAndName?`	`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 …
`interval?`	`string \| 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.
`noLinks?`	`boolean \| 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…
`ratingsDisplayMode?`	`"gauge" \| "gauge-and-breakdown" \| "breakdown" \| undefined`	`—`
`ratingsMode?`	`"single" \| "multiple" \| undefined`	`—`
`symbol`	`string`	`—`
`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…

TradingViewBrokerRating props18 props

TradingViewBrokerRating props

Type: TradingViewBrokerRatingProps

Values the compiler reads from the declaration.

TradingViewBrokerRating props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`broker`	`string`	`—`	Your TradingView broker slug, e.g. `sample`. Required by the provider.
`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.
`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.
`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…
`showBrokerName?`	`boolean \| undefined`	`—`
`showReviews?`	`boolean \| 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…

TradingViewBrokerReviews props18 props

TradingViewBrokerReviews props

Type: TradingViewBrokerReviewsProps

Values the compiler reads from the declaration.

TradingViewBrokerReviews props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`broker`	`string`	`—`
`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.
`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.
`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…
`showBrokerName?`	`boolean \| undefined`	`—`
`showReviews?`	`boolean \| 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…