Introduction

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

Two ways to use it

Install the npm package @profitmaker/ui and import components directly — ESM, tree-shakeable, with a chunk per component for lazy loading. Or copy the source from any component's Source tab into your project and own the code outright. Both stay in sync with the same design system.

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: 16, 185, 129;
}