react-klinecharts-ui

Headless React building blocks for financial trading terminals — a state provider, 25+ hooks, drawing overlays and TradingView-style indicators on top of klinecharts. Bring your own UI.

Get started View on GitHub Live demo Examples

Why react-klinecharts-ui?

Headless by design

No UI components ship with the library. You get a state provider and hooks — render them with Tailwind, shadcn, Radix, MUI or anything else.

Composable hooks

25+ focused hooks: periods, symbol search, indicators, drawing tools, order lines, alerts, replay, layouts, undo/redo and more.

Pro-grade overlays

Drawing-tool overlay templates — Fibonacci, Elliott waves, Gann, harmonic patterns, position tools — ready to register on the chart.

TradingView-style indicators

Custom indicator templates (Ichimoku, SuperTrend, VWAP, HMA, MA Ribbon, TV MACD/RSI/BOLL) plus a TA math library.

Quick taste

import { KlinechartsUIProvider } from "react-klinecharts-ui";
import { ChartCanvas } from "react-klinecharts-ui/chart";

<KlinechartsUIProvider datafeed={datafeed} defaultSymbol={symbol} defaultTheme="dark">
  <ChartCanvas className="h-[500px]" />
</KlinechartsUIProvider>;

Head to the Quick Start for a complete, runnable example with a live chart.