A copy-paste React component library for AI trading interfaces — from buttons and dialogs to live order books and portfolio charts. Built with Tailwind CSS and TypeScript.
40+
Components
100%
TypeScript
Built-in
Dark mode
Ready
Copy-paste
Domain-specific components — order books, portfolios, order forms, and deal lists — ready to drop into your terminal.
Order Book · BTC/USDT
Across all exchanges
Showcase your platform capabilities with animated feature cards.
Real-time market data, advanced charting tools, and order management in a single interface.
Track your positions, analyze P&L, and manage risk across multiple exchanges.
Create, backtest, and deploy algorithmic trading strategies powered by AI.
Deep performance analytics, trade journaling, and actionable market insights.
Historical backtesting with advanced simulation and risk metrics.
Access to historical OHLCV data across 50+ exchanges and 10,000+ trading pairs.
Buttons, badges, cards, and inputs with consistent styling.
Button
Badge
Card
AI-generated market signal based on technical analysis and sentiment data.
Total portfolio value across all connected exchanges.
$24,501.00
↑ +12.4% this month
Input
Introduce your team with clean, animated team member cards.
@suenot
CEO
Fullstack · DevOps · AI
@markolofsen
CTO
Fullstack
@timax
Head of Quant
Fullstack · AI
@your_name
Join Us
Open position
Ship as an npm package — ESM, tree-shakeable, a chunk per component. Or copy the source. Your call.
1 · Install
npm install @marketmaker_cc/ui
2 · Wire up tokens + Tailwind
// app/layout.tsx import '@marketmaker_cc/ui/styles.css' // tailwind.config.js presets: [require('@marketmaker_cc/ui/tailwind-preset')]
3 · Import what you need
// tree-shaken named imports import { Button, OrderBook } from '@marketmaker_cc/ui' // per-component subpath — lazy loads a single chunk import { OrderForm } from '@marketmaker_cc/ui/order-form'