Introduction

ui.marketmaker.cc is a collection of copy-paste ready React components built for the marketmaker.cc AI trading platform. Components are built with Tailwind CSS, TypeScript, and follow the design system used across all marketmaker.cc products.

Philosophy

This is not a traditional npm package. It is a collection of source components that you copy directly into your project. You own the code — customize freely.

Prerequisites

• Next.js 14+ (App Router) or any React 18+ project
• Tailwind CSS 3.x configured
• TypeScript

Install dependencies

npm install clsx tailwind-merge class-variance-authority lucide-react next-themes

Add the utility

Create lib/utils.ts:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Add CSS variables

Add the design tokens to your globals.css:

:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 100%;
  --card: 240 10% 4.9%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 245 72% 60%;
  --accent-foreground: 0 0% 100%;
  --accent-darker: 245 90% 82%;
  --border: 240 3.7% 20%;
  --radius: 1.5rem;
  --accent-rgb: 90, 76, 228;
}