Spark UI
Back to UI Kit

Price Action Grid

OHLC candlesticks with rounded wick caps, solid down-candles and hollow up-candles.

Interactive Stage Preview

Customize

8 options
Accent Color
Down Candle Color
Candles
5
Candle Width
22
Volatility
40
Corner Radius
6
Wicks
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-financial-candlesticks

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
downColorstring (hex)'#52525b'Colour of candles that close lower than they open.
candlesnumber5Number of price candles.
candleWidthnumber22Body width of each candle in pixels.
volatilitynumber40How much price swings between candles.
radiusnumber6Rounding on each candle body.
showWicksbooleantrueShow the high/low wick lines.
speednumber100Playback speed of entry and transition animations, as a percentage.