Installation

The components ship as an npm package, @profitmaker/ui. Install it, wire up the Tailwind preset and design tokens, then import only what you need — the package is ESM with sideEffects: false and a chunk per component, so unused widgets are tree-shaken and lazy imports load a single chunk.

1. Install

npm install @profitmaker/ui

Peer dependencies react and react-dom (>= 18) are expected to already be in your app.

2. Import the design tokens

Import once at the root of your app (e.g. app/layout.tsx):

import '@profitmaker/ui/styles.css'

3. Configure Tailwind

Add the preset (maps the token CSS variables to color/radius utilities) and include the package in content so its classes are not purged:

// tailwind.config.js
module.exports = {
  presets: [require('@profitmaker/ui/tailwind-preset')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@profitmaker/ui/dist/**/*.js',
  ],
}

4. Use a component

Named imports from the package root. Tree-shaking drops everything you don't reference:

import { Button, OrderBook } from '@profitmaker/ui'

export function Example() {
  return (
    <div className="h-[400px] w-72">
      <OrderBook
        bids={[{ price: 64012.5, amount: 0.84 }]}
        asks={[{ price: 64014.0, amount: 0.62 }]}
        priceDecimals={1}
        amountDecimals={3}
      />
    </div>
  )
}

Per-component imports & lazy loading

Every component is also exported on its own subpath. Use these with next/dynamic or React.lazy so the bundler loads only that component's chunk — a barrel import would pull the whole library into the dynamic chunk.

// Static, minimal subpath import
import { OrderBook } from '@profitmaker/ui/order-book'

// Lazy — only the order-book chunk is fetched on demand
import dynamic from 'next/dynamic'
const OrderBook = dynamic(() =>
  import('@profitmaker/ui/order-book').then((m) => m.OrderBook),
)

The trading widgets carry a 'use client' directive that is preserved in the build, so they work as client components inside the Next.js App Router without extra wrapping.

Prefer to copy the source?

Every component page has a Source tab — you can paste the file straight into components/ instead of installing the package. In that case install the primitives the file uses:

npm install clsx tailwind-merge class-variance-authority lucide-react @radix-ui/react-slot