@tipchatteam/react-ui

Pre-built, themeable UI components for TipChat. Drop in a full chat widget or compose individual components to build your own layout.

Installation

npm install @tipchatteam/react-ui @tipchat/react @tipchat/core

react and react-dom (>=18.0.0) are required as peer dependencies.

Quick Start

import { TipChatClient } from '@tipchat/core';
import { TipChatProvider } from '@tipchat/react';
import { TipChatWidget, TipChatThemeProvider, darkTheme } from '@tipchatteam/react-ui';
import '@tipchatteam/react-ui/styles.css';

const client = new TipChatClient({
  baseUrl: 'https://tipchat-api.onrender.com',
  tenantId: 'your-tenant-id',
  walletProvider: {
    getAddress: () => wallet.address,
    signMessage: (msg) => wallet.signMessage(msg),
  },
});

function App() {
  return (
    <TipChatProvider value={client}>
      <TipChatThemeProvider theme={darkTheme}>
        <TipChatWidget />
      </TipChatThemeProvider>
    </TipChatProvider>
  );
}

The TipChatWidget renders a complete chat experience with a conversation sidebar, message thread with iMessage-style bubble grouping, typing indicators, message composer, and an inline tipping UI.

Theme Customization

TipChat uses a Privy-style theme system. Every color, font, border radius, and spacing value is customizable.

Using a preset theme

import { darkTheme, lightTheme, baseTheme, ethereumTheme, solanaTheme } from '@tipchatteam/react-ui';

<TipChatThemeProvider theme={solanaTheme}>
  <TipChatWidget />
</TipChatThemeProvider>

Creating a custom theme

import { createTheme, darkTheme } from '@tipchatteam/react-ui';

const myTheme = createTheme({
  colors: {
    accent: '#ff6b00',
    accentHover: '#e55f00',
    background: '#0a0a0a',
    messageBubbleOwn: '#ff6b00',
  },
  typography: {
    fontFamily: "'Space Grotesk', sans-serif",
  },
  borderRadius: {
    lg: '16px',
    full: '24px',
  },
  layout: {
    density: 'compact',
  },
}, darkTheme); // base theme to extend from

Applying themes programmatically

import { applyThemeToElement, themeToCssVariables } from '@tipchatteam/react-ui';

// Apply directly to a DOM element
applyThemeToElement(document.getElementById('chat')!, myTheme);

// Or get CSS variables as an object
const vars = themeToCssVariables(myTheme);
// { '--tipchat-accent': '#ff6b00', '--tipchat-background': '#0a0a0a', ... }

Preset Themes

| Theme | Import | Description | |-------|--------|-------------| | darkTheme | Default | Dark mode with teal accent | | lightTheme | Built-in | Light mode with teal accent | | baseTheme | Brand | Coinbase/Base blue | | ethereumTheme | Brand | Ethereum purple | | solanaTheme | Brand | Solana gradient purple | | polymarketTheme | Brand | Polymarket green | | farcasterTheme | Brand | Farcaster purple |

All presets are also available via themes.dark, themes.light, themes.base, etc.

Components

TipChatWidget

Full-featured chat widget with conversation list, messages, composer, and tipping.

<TipChatWidget
  className="my-chat"
  placeholder="Say something..."
  defaultTipCurrency="USDC"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | -- | Additional CSS class | | placeholder | string | 'Write a message...' | Composer input placeholder | | defaultTipCurrency | 'USDC' \| 'ETH' \| 'SOL' \| 'OTHER' | 'USDC' | Default currency for tips |

TipButton

Standalone tip button for use outside the widget.

<TipButton
  recipientWallet="0x..."
  amount={1.0}
  currency="USDC"
  onSuccess={(txHash) => console.log('Tipped!', txHash)}
/>

GifPicker

GIF search and selection component.

<GifPicker onSelect={(gifUrl) => sendMessage({ mediaUrl: gifUrl, messageType: 'gif' })} />

MessageReactions

Emoji reaction display and interaction component.

<MessageReactions
  reactions={message.reactions}
  onAdd={(emoji) => addReaction(message.id, { emoji })}
  onRemove={(emoji) => removeReaction(message.id, emoji)}
/>

TypingIndicator

Animated typing indicator showing which users are typing.

<TypingIndicator users={typingUsers} />

ActivityFeed

Activity timeline component for displaying chat events, tips, and market actions.

<ActivityFeed items={activityItems} />

Theme Components

| Component | Description | |-----------|-------------| | TipChatThemeProvider | Context provider that applies a theme to all child TipChat components | | Themed | Wrapper that applies theme CSS variables to its children | | useTipChatTheme() | Hook to access the current theme object | | useTipChatCssVariables() | Hook to get theme as CSS variable key-value pairs | | useThemeStyles() | Hook to get computed inline styles from the theme |

Utility Functions

| Function | Description | |----------|-------------| | createTheme(overrides, base?) | Create a custom theme by merging overrides onto a base theme | | mergeTheme(base, overrides) | Deep merge two theme objects | | groupMessages(messages, options?) | Group messages by sender for iMessage-style bubble layout | | getBubblePosition(group, index) | Get bubble position (first, middle, last, single) in a group |

Styles

Import the base stylesheet to get default component styles:

import '@tipchatteam/react-ui/styles.css';

All class names are prefixed with tipchat- to avoid collisions with your application styles.

Documentation

Full documentation and guides are available at tipchat.dev.

License

MIT