Integrations · TradingView · Tickers

Quotes in a strip, a chip or a card

Four ticker widgets for four different shapes of space. All four are Web Components, so they inherit Luc UI's colours and font through the provider's documented token bridge.

Ticker Tape

The strip. A horizontal tape defines its own height, so the box only needs to be wide enough.

TickerTape

Web Component

A scrolling strip of quotes. Horizontal or vertical, with optional hover charts.

Provider docs

TickerTape

Web Component

Vertical, with hover charts and compact items.

Provider docs

Tickers

The same strip with price, change and an optional inline chart; hideChart turns it into a compact quote list.

Tickers

Web Component

Horizontal, no chart.

Provider docs

Tickers

Web Component

Vertical with inline charts.

Provider docs

Single Ticker

One instrument: name, price and change.

SingleTicker

Web Component

Apple

Provider docs

SingleTicker

Web Component

Bitcoin

Provider docs

SingleTicker

Web Component

Gold

Provider docs

Ticker Tag

The inline chip. It composes inside a sentence, a table cell or a metadata row without breaking the line box.

TickerTag

Web Component

Inline in prose, with and without a background.

Provider docs

Reported revenue grew while

held its margin, and

traded through the range.

preserveText uses your own words as the label; the provider still owns the price and the link.

Usage

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

<TradingViewTickerTape
  symbols={["NASDAQ:AAPL", "BINANCE:BTCUSDT", "FX:EURUSD"]}
  direction="horizontal"
  height={104}
/>

The scrolling strip; the provider owns the scroll motion.

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

<TradingViewTickers symbols={symbols} direction="vertical" height={400} />

A quote list with optional inline charts.

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

<TradingViewSingleTicker symbol="NASDAQ:AAPL" height={114} />

One quote card for a detail page or summary rail.

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

<TradingViewTickerTag symbol="NASDAQ:AAPL" preserveText>
  Apple
</TradingViewTickerTag>

An inline chip that can sit inside a sentence or table cell.

Configuration

`symbols` is an ordered list of provider symbols. `direction`, `itemSize`, `hideChart`, `hoverType`, `hideBackground` and `preserveText` are supported by the specific widgets that publish them.

Client and provider lifecycle

All four are Web Components. The tape's horizontal size is provider-defined; mount it with a width and the height recommended by the widget, and keep repeated identifiers stable.

Limitations

Quotes, change calculations, links and scrolling belong to TradingView. The tape exposes no reduced-motion switch, and the wrapper does not freeze a live widget to imitate one.

Guidelines

Use a tape for ambient market context and a single ticker when one instrument is the subject.
Use `TickerTag` for prose or table cells, where a block widget would break the line box.

Don't

Do not use a moving tape as the only way to communicate a price or a critical change.
Do not put several ticker tapes on one page; the motion competes and the provider cost multiplies.

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
`TradingViewSingleTicker`	18 documented props	`({ symbol, hideMarketStatus, symbolUrl, theme, ...base }: TradingViewSingleTickerProps) => import("@types/react").JSX.Element`
`TradingViewTickers`	25 documented props	`({ symbols, theme, symbolUrl, ...rest }: TradingViewTickersProps) => import("@types/react").JSX.Element`
`TradingViewTickerTag`	22 documented props	`({ symbol, size, hideChange, hideBackground, preserveText, symbolUrl, theme, ...base }: TradingViewTickerTagProps) => import("@types/react").JSX.Element`
`TradingViewTickerTape`	25 documented props	`({ symbols, direction, itemSize, hideChart, lineChartType, showHover, hoverType, hideLogo, noLinks, symbolUrl, theme, ...base }: TradingViewTickerTapeProps) => import("@types/react").JSX.Element`

TradingViewTickerTape props

Type: TradingViewTickerTapeProps

Values the compiler reads from the declaration.

TradingViewTickerTape 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.
`direction?`	`TradingViewDirection \| 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.
`hideChart?`	`boolean \| undefined`	`—`
`hideLogo?`	`boolean \| undefined`	`—`	Removes the provider's own logo mark. Attribution links stay.
`hoverType?`	`TradingViewHoverType \| 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`	`—`
`lineChartType?`	`"Area" \| "Line" \| "Baseline" \| 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`	`—`	Disables symbol links entirely. Attribution links stay.
`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…
`showHover?`	`boolean \| undefined`	`—`
`symbols`	`readonly 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…

TradingViewSingleTicker props18 props

TradingViewSingleTicker props

Type: TradingViewSingleTickerProps

Values the compiler reads from the declaration.

TradingViewSingleTicker 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.
`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 …
`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…

TradingViewTickers props25 props

TradingViewTickers props

Type: TradingViewTickerTapeProps

Values the compiler reads from the declaration.

TradingViewTickers 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.
`direction?`	`TradingViewDirection \| 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.
`hideChart?`	`boolean \| undefined`	`—`
`hideLogo?`	`boolean \| undefined`	`—`	Removes the provider's own logo mark. Attribution links stay.
`hoverType?`	`TradingViewHoverType \| 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`	`—`
`lineChartType?`	`"Area" \| "Line" \| "Baseline" \| 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`	`—`	Disables symbol links entirely. Attribution links stay.
`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…
`showHover?`	`boolean \| undefined`	`—`
`symbols`	`readonly 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…

TradingViewTickerTag props22 props

TradingViewTickerTag props

Type: TradingViewTickerTagProps

Values the compiler reads from the declaration.

TradingViewTickerTag props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`children?`	`ReactNode`	`—`
`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.
`hideBackground?`	`boolean \| undefined`	`—`
`hideChange?`	`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 …
`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…
`preserveText?`	`boolean \| undefined`	`—`	When a `symbol` is set, use the element's own text as the display name. Pass the label through `children`.
`size?`	`"small" \| "medium" \| "large" \| 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…