@differential-studio/ui

A shared React component library for Differential tools.

Installation

Install the package and its peer dependencies:

npm install @differential-studio/ui next-themes react react-dom

# Install peer dependencies for components you use
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
# ... and other @radix-ui packages as needed

Or install all common peer dependencies at once:

npm install @differential-studio/ui next-themes react react-dom \
  @radix-ui/react-accordion @radix-ui/react-alert-dialog \
  @radix-ui/react-dialog @radix-ui/react-dropdown-menu \
  @radix-ui/react-label @radix-ui/react-popover \
  @radix-ui/react-select @radix-ui/react-slot \
  @radix-ui/react-tabs @radix-ui/react-toast \
  @radix-ui/react-tooltip lucide-react clsx tailwind-merge

Setup

Wrap your app with ThemeProvider:

import { ThemeProvider } from "next-themes";
import "@differential-studio/ui/styles";

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {/* Your app */}
    </ThemeProvider>
  );
}

Components

DifferentialHeader

import { DifferentialHeader } from "@differential-studio/ui";

// Public mode (unauthenticated)
<DifferentialHeader
  toolName="Your Tool Name"
  showSignIn
  onSignIn={() => navigate("/auth")}
/>

// Authenticated mode
<DifferentialHeader
  toolName="Your Tool Name"
  user={{
    subscriptionTier: "pro",
    tokenBalance: 100,
    tokenLimit: 500,
    storageUsed: 1073741824,    // bytes
    storageLimit: 10737418240,  // bytes
  }}
  onSignOut={() => signOut()}
  onTokenClick={() => navigate("/pricing")}
/>

DifferentialFooter

import { DifferentialFooter } from "@differential-studio/ui";

<DifferentialFooter />

ThemeToggle

import { ThemeToggle } from "@differential-studio/ui";

<ThemeToggle />

Full Example

import { DifferentialHeader, DifferentialFooter } from "@differential-studio/ui";

function App() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <DifferentialHeader toolName="My Tool" showSignIn />
      <main className="flex-1">{/* Content */}</main>
      <DifferentialFooter />
    </div>
  );
}

Building & Publishing

Development

npm install
npm run dev

Building

npm run build

This will create the dist folder with:

• index.es.js - ES module build
• index.umd.js - UMD build
• lib-exports.d.ts - TypeScript definitions

Publishing to NPM

1. Login to NPM (if not already):

   npm login

2. Build the package:

   npm run build

3. Publish (the prepublishOnly script will automatically build before publishing):

   npm publish --access public

   For scoped packages like @differential-studio/ui, you need the --access public flag unless you have a paid NPM account.

4. Update version for subsequent releases:

   npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
   npm version minor  # for new features (1.0.0 -> 1.1.0)
   npm version major  # for breaking changes (1.0.0 -> 2.0.0)
   npm publish --access public

Peer Dependencies

This package uses peer dependencies to avoid version conflicts. Make sure to install the required peer dependencies in your consuming application. Check package.json for the complete list of peer dependencies.