Trading UI components for React and Tailwind
The parts a trading screen is made of, built for real density rather than a demo. Order entry, positions, fills, live tape and the price surfaces around them, all dark by default and sized for tabular numbers. Every one installs through the shadcn CLI into your own project, so you own the source and can take it apart.
13 components, installable with the shadcn CLI.
Swap Ticket
A trade card with an editable amount, a flip button that swaps the two cards, and a token overlay.
View componentHoldings Table
A fund-holdings register with money columns, YTD pills, and weight bars.
View componentFills Blotter
A streaming fills table. New fills land as working, then resolve to filled or rejected.
View componentTrade Tape
Live time and sales. Prints stream in, side-coloured and sized by magnitude.
View componentTicker Tape
A finance tape gliding through a rail. Hover to hold it still, green up, red down.
View componentCandlestick
Candles over a volume histogram with a magnet crosshair and a live OHLC legend.
View componentBalance Header
A wallet's headline number with a privacy toggle that masks every figure to dots.
View componentTrade Journal Table
A trade log where the open position is lit and closed ones settle to win or loss pills.
View componentPrice Scrubber
A scrub chart with a magnet crosshair and a hero number that recolours off the reference price.
View componentCrypto/Fiat
A dual-denomination field. Type in fiat or units, the toggle carries the value through the rate.
View componentAmount
A money-formatting family so every number in a screen reads the same.
View componentEquity & Drawdown
An equity curve over a synced drawdown panel, one crosshair driving both.
View componentMarket Snapshot
A price card with a scrubable line chart and a period switcher.
View component
Questions
- Are these components ready for a live trading product?
- They are production-grade React source that you install and own, built with real data density and every state designed, including loading, empty, error and stale. They carry no market data or broker connection, so you wire them to your own feed and order API.
- Do the numbers stay aligned?
- Yes. Every figure is set in tabular numerals with a fixed decimal treatment, so columns line up and values do not jump as prices tick.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide