Integrations · TradingView · Screeners

Filterable markets

A screener is a table with the provider's own columns, presets and filters. LUC gives it a bounded box and a theme; the filtering, the columns and the data stay TradingView's.

Screener

One widget, many markets — the market prop selects the universe.

Screener

iframe

US equities.

Provider docs

Screener

iframe

FX.

Provider docs

Screener

iframe

Crypto pairs.

Provider docs

Constrained heights scroll inside the widget, not inside the page: give a screener a bounded box rather than letting it grow with its row count.

Cryptocurrency Market

The crypto table on its own: price, market cap, volume and change.

CryptocurrencyMarket

iframe

The cryptocurrency market table: price, market cap, volume and change.

Provider docs

Usage

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

<TradingViewScreener
  market="america"
  defaultColumn="overview"
  showToolbar
  height={560}
/>

The provider's market table for one accepted market key.

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

<TradingViewCryptocurrencyMarket displayCurrency="USD" height={520} />

The crypto-specific table with the provider's own columns and filters.

Configuration

`market` selects the provider universe; `defaultColumn` and `defaultScreen` choose provider presets. `showToolbar` exposes the provider's filtering controls and `displayCurrency` changes display values only.

Client and provider lifecycle

Both are iframe widgets. Use a fixed or bounded height so the table scrolls inside its provider document rather than growing the page.

Limitations

Universe membership, rows, filters and column calculations are TradingView's. LUC does not receive the selected rows and cannot turn this table into a local data source.

Guidelines

Use a screener when a provider-filtered market table is enough and no application action depends on its rows.
Keep the provider market key and the visible heading aligned so readers know which universe is being filtered.

Don't

Do not promise your own watchlist or sorting semantics; those controls are the provider's.
Do not assume every market key has its own attribution label; the wrapper falls back to the provider's general markets link.

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
`TradingViewCryptocurrencyMarket`	19 documented props	`({ displayCurrency, defaultColumn, defaultScreen, showToolbar, transparent, locale, theme, ...base }: TradingViewCryptocurrencyMarketProps) => import("@types/react").JSX.Element`
`TradingViewScreener`	19 documented props	`({ market, defaultColumn, defaultScreen, showToolbar, transparent, locale, theme, ...base }: TradingViewScreenerProps) => import("@types/react").JSX.Element`

TradingViewScreener props

Type: TradingViewScreenerProps

Values the compiler reads from the declaration.

TradingViewScreener 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.
`defaultColumn?`	`string \| undefined`	`—`	Provider column preset.
`defaultScreen?`	`string \| undefined`	`—`	Provider screen preset, e.g. `general`, `top_gainers`.
`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`.
`market?`	`TradingViewScreenerMarket \| undefined`	`—`
`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…
`showToolbar?`	`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…

TradingViewCryptocurrencyMarket props19 props

TradingViewCryptocurrencyMarket props

Type: TradingViewCryptocurrencyMarketProps

Values the compiler reads from the declaration.

TradingViewCryptocurrencyMarket 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.
`defaultColumn?`	`string \| undefined`	`—`
`defaultScreen?`	`string \| undefined`	`—`
`displayCurrency?`	`string \| undefined`	`—`	`USD`, `EUR`… — the provider's display currency.
`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…
`showToolbar?`	`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…