tradecn/ui

Trading-terminal components you install with shadcn add. The source lands in your repo and it's yours.

Install

GitHub form

npx shadcn@latest add tradecn/ui/data-grid#v0.1.3

Pin the tag. The tag is the version. There is no npm package.

Namespace form, in components.json

{
  "registries": {
    "@tradecn": "https://tradecn.dev/r/{name}.json"
  }
}

npx shadcn@latest add @tradecn/data-grid

/r/{name}.json is the latest release. /r/v0.1.3/{name}.json is this one, for good.

Items

Item	Type	What it does
`format`	lib	Number formatting for trading screens: tick-derived precision, 32nds and 64ths with + halves, yields, basis points, DV01, compact notional, signed values, one null sentinel.
`row-store`	lib	Store-agnostic row store for high-rate feeds: apply one delta batch per frame, subscribe per row, sorted and filtered views with a reorder hold, and a frame batcher for message-driven feeds.
`flash-cell`	ui	A cell that flashes on change, colored up, down, or flat, as a fill or an inset ring. Web Animations on the existing element, a shared memory so virtualized rows resume mid-flash, reduced-motion aware. Introduces the up/down/flat tokens.
`data-grid`	ui	Virtualized grid fed by a row store one row at a time: a delta re-renders one row, numeric cells flash by direction, frozen and resizable columns, keyboard selection by row id, a reorder hold, a right-click menu, presets for blotter, watchlist, RFQ, and option chain.
`feed-health`	ui	A strip that shows each feed's connection state, the age of its data, and a staleness tier, with drop counts for coalesced lanes and gap indicators for ordered ones. Pluggable thresholds and session calendar; only the leaves tick.
`use-hotkeys`	hook	A hotkey registry: bindings declared as data with an id, keys, a scope, and a description; one keydown listener; scopes read from the DOM so a panel's keys beat global ones; chords with a timeout; conflict detection; remapping with the consumer's persistence. Typing is protected, menus are left alone, and a dialog is a wall.
`command-palette`	ui	A command palette on your own shadcn command: actions from a registry, a second action per row on Shift+Enter, async symbol search through an adapter you supply, recents, and shortcuts rendered live from the hotkey registry. A go-bar variant renders inline and reads SYMBOL FUNCTION commands through your grammar.
`panel`	ui	The frame around a book, a chart, or a blotter. A panel is a hotkey scope, so its keys and its palette actions come with it. A header that is a drag handle, a symbol tag you click to retype, link groups that carry a symbol between panels and between windows, and a popout that moves the panel to its own window without remounting it.
`sparkline`	ui	A line small enough for a grid cell that still says which way, how far, and between what. Colored by direction against the first reading or a baseline, with the same direction in words for a screen reader. A missing reading is a gap, not a shift. Fixed size for a grid column, or it fills its box through one shared ResizeObserver. An optional crosshair that moves with the pointer and the arrow keys.
`watchlist`	ui	The data grid as a watchlist: symbol, last, bid, ask, change, change %, and volume, with prices printed through your convention per row. A field that adds a symbol and goes to it instead when it is already there, and three ways to take one off: Delete, a button on the row, and the right-click menu. The list stays yours.
`blotter`	ui	The data grid as an order blotter: time, symbol, side, quantity, filled, price, status, and account. The status is the server's word, printed as it arrives and never worked out. An action such as Cancel is offered only for the orders whose allowedActions the server put it in, the button says how many that is, and the check is made again against the store as the click lands.
`workspace`	ui	Panels that dock, tab, float, and pop out, on dockview. The dock owns where things sit; tradecn owns what each panel is: a kind, a title, and the small JSON it asked to keep. Every docked panel is a hotkey scope of its kind with the active border, and the dock decides which one is active. A layout is written out some milliseconds after the last change, carries its own persistence boundaries, and is read back through a parser that takes nothing on trust.
`ticket`	block	An order ticket that types a price the way the instrument quotes it (99-16+), steps it by the tick with the arrows and the buttons, and hands a checked draft to the action you named. Buttons are the actions the server allowed and nothing else; the status is the server word, printed as it is; an acknowledgement rings the ticket once in primary. Its keys work while you type in it, and inside a dialog.
`tradecn-terminal`	theme	A terminal look for the whole app: black background, near-black cards, amber primary, square corners, and a monospace stack in place of the sans. Both modes get the same palette, so it is a terminal whether or not the app sets a dark class. It keeps the colorblind-safe up and down pair.
`tradecn-terminal-classic`	theme	The terminal theme with green for up and red for down. Everything else is tradecn-terminal: black background, amber primary, square corners, a monospace stack, the same palette in both modes. Green and red are the pair the most common kinds of color blindness confuse, so direction leans harder on the sign and the words.