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.
← All products
Component libraryInstant access
Trading UI Kit
Drop-in React + TypeScript + Tailwind components for trading and portfolio interfaces — order forms, slippage controls, position tables, and confirmation modals, each implementing a named bias-resistant pattern.
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. 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. 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.
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.
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.
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.