What's the licensing model?

One-time purchase, one organisation. Use the components in your own commercial products - no per-seat fees, no subscription. Contact us for team licensing across multiple organisations.

What framework does the kit assume?

React 18+ and Tailwind CSS, TypeScript-first with full types. There are no AgGrid, Highcharts, or wagmi dependencies - the components are self-contained and take data through typed props, so they work with whatever data layer you already have.

No. The kit is paid commercial code - pay once, copy it into your repo, and own what you ship. There's no runtime dependency on Ray Group.

Will you customise it for my product?

The kit is a starting point. If you need bespoke work on top - including engagement-level customisation, integration help, or feature work - that's a separate Ray Group engagement. The contact form on the homepage is the right place to start that conversation.

When do I get access?

Immediately. Pay once and an access token arrives by email, along with your DeFi UX MCP Pro key. 14-day refund if you have not used the library.

← All products

Instant accessComponent library

Ship trading UI that resists leverage anchoring, surfaces real slippage, itemises fees before confirm, and shows liquidation distance without reinventing the screen.

Name: Trading UI Kit
Brand: Ray Group
SKU: trading-ui-kit
Price: 199 USD
Availability: InStock

Drop-in React + TypeScript + Tailwind components for trading and portfolio interfaces - order forms, slippage controls, position tables, and confirmation modals - for DeFi, brokers, and FinTech alike.

View pricing See the previews

Pattern preview · Order-book context

BTC-PERP

$60,981

60,985.501.245
60,983.102.103
60,980.600.521
60,977.003.211

Component preview · ConfirmTransactionModal

Long BTC / USDC · 10× leverage

Notional: $30,491.75
Margin required: $3,049.18
Total to lock: $3,064.43

Review your trade

Live previews

Four previews, realistic trading data.

Static previews of the kit's patterns in context. Every number, level, and warning uses realistic trading data - not lorem ipsum.

Pattern preview · Order-book context

BTC / USDC - perpetual

$60,981.34

Spread $2.40 · 0.004%

Price (USDC)Size (BTC)Total (USDC)

60,985.501.24575,927
60,984.200.83650,983
60,983.102.103128,217
60,982.000.41225,124

Last $60,981.34▲ +0.12%Spread 2.40

60,980.600.52131,791
60,979.801.802109,872
60,978.200.91755,876
60,977.003.211195,640

Shown for context - the kit doesn't ship a market-data feed. Its order form, slippage control, and fee breakdown sit alongside surfaces like this, taking data via typed props.

Component preview · ConfirmTransactionModal

Review your trade

Position

Long BTC / USDC · 10× leverage

Size 0.50 BTC · Entry $60,983.50

Notional: $30,491.75
Margin required: $3,049.18
Open fee (0.05%): $15.25
Total to lock: $3,064.43

Liquidation: $54,886.30
Take-profit: $67,081.85

High leverage. A 10% adverse move liquidates the position.

Component preview · PositionTable

Open positions

Net P&L

+$133.20

Margin used

$7,182.50

Pair	Side	Size	Entry	Mark	P&L	Liq.
BTC / USDC	Long	0.50	60,983.50	61,250.10	+$133.30+0.44%	54,886.30
ETH / USDC	Short	4.20	3,041.20	3,012.50	+$120.54+0.94%	3,346.10
SOL / USDC	Long	28.00	138.40	134.10	-$120.40-3.11%	124.50

Inline editing for stop-loss and take-profit. Cell renderers handle currency, percentage, and signed-P&L colouring - data arrives via typed props.

⚠

Component preview · PriceImpactWarning · severity = high

High volatility on BTC / USDC.

BTC has moved ±4.3% in the last hour. Consider reducing position size or widening slippage tolerance before placing leveraged orders.

Severity tiers (info · caution · warning · critical) and typed event hooks ship with the component.

Static previews. The live components - typed, self-contained, themable via design tokens - are in the library the moment you buy.

What it is

A set of drop-in React + TypeScript + Tailwind components for trading screens - slippage control, order form, leverage selector, position table, fee breakdown, confirmation modal, price-impact warning, and error states - each implementing a named bias-resistant pattern, with design notes explaining why. Built for trading in general: DeFi, brokers, and FinTech. DeFi UX MCP Pro ($29/mo value) is included.

How it works

Pay once, get instant email access to the library. Copy src/ into your app, wire the theme tokens to your design system, and pass your own data through typed props - the components are self-contained, with no AgGrid, Highcharts, or wagmi dependencies to license or integrate.

Why it's worth it

Each component encodes decisions most teams get wrong under deadline - anchoring in leverage presets, hidden slippage cost, unreadable fee breakdowns - with the reasoning documented, so what you ship is defensible, not just styled.

Built for trading screens

Not a generic dashboard library.

Most component libraries are designed for marketing pages. This one is designed for the screens traders actually use - across DeFi, brokerage, and FinTech. Every component ships TypeScript-first with full types, self-contained code, and design notes naming the bias-resistant pattern it implements.

TypeScript
React
Tailwind CSS

What's in the kit

The decision points of a trading screen, componentised.

Slippage control

Tiered slippage tolerance with the source of the default visible and the absolute output range alongside the percentage - the anchoring-resistant pattern from the rubric.

Order form

A composable order entry form with explicit units, sensible defaults, and validation states that explain what's wrong and how to fix it.

Leverage selector

A leverage control that doesn't anchor users to the maximum - neutral presets, liquidation distance shown at the point of choice, and a typed warning threshold.

Position table

An open-positions table with signed-P&L colouring, currency and percentage renderers, and inline stop-loss / take-profit editing - data arrives via typed props.

Fee breakdown

Itemised fees in absolute terms and percentages, totalled before confirmation - no fee revealed only after signing.

Confirmation modal

A pre-confirmation review that surfaces notional, margin, fees, liquidation price, and risk warnings in user-readable language.

Price-impact warning

Severity-tiered warnings for price impact, volatility, and liquidity - with actionable next steps, not just a red banner.

Error & empty states

User-readable error and empty states for the failure modes trading screens actually hit - rejected orders, stale data, partial fills.

Frequently asked

About the kit.

What's the licensing model?: One-time purchase, one organisation. Use the components in your own commercial products - no per-seat fees, no subscription. Contact us for team licensing across multiple organisations.
What framework does the kit assume?: React 18+ and Tailwind CSS, TypeScript-first with full types. There are no AgGrid, Highcharts, or wagmi dependencies - the components are self-contained and take data through typed props, so they work with whatever data layer you already have.
Is it open source?: No. The kit is paid commercial code - pay once, copy it into your repo, and own what you ship. There's no runtime dependency on Ray Group.
Will you customise it for my product?: The kit is a starting point. If you need bespoke work on top - including engagement-level customisation, integration help, or feature work - that's a separate Ray Group engagement. The contact form on the homepage is the right place to start that conversation.
When do I get access?: Immediately. Pay once and an access token arrives by email, along with your DeFi UX MCP Pro key. 14-day refund if you have not used the library.

Get access

Pay once. Ship the components today.

No waitlist. After checkout you receive an email with a library link, access token, and your DeFi UX MCP Pro key. Copy the components into your repo and start wiring props.

View pricing Already purchased? Sign in

Ship trading UI that resists leverage anchoring, surfaces real slippage, itemises fees before confirm, and shows liquidation distance without reinventing the screen.Ship trading UI thatwithout reinventing the screen.

Four previews, realistic trading data.

BTC / USDC - perpetual

Review your trade

Open positions

Not a generic dashboard library.

The decision points of a trading screen, componentised.

Slippage control

Order form

Leverage selector

Position table

Fee breakdown

Confirmation modal

Price-impact warning

Error & empty states

About the kit.

Pay once. Ship the components today.

Ship trading UI that resists leverage anchoring, surfaces real slippage, itemises fees before confirm, and shows liquidation distance without reinventing the screen.