@fluxy-chat/ui

React UI components for FluxyChat — shadcn-style chat primitives built on Radix UI and Tailwind.

Pair with @fluxy-chat/react for realtime state and @fluxy-chat/sdk for the client.

Install

pnpm add @fluxy-chat/ui @fluxy-chat/react @fluxy-chat/sdk

Peer dependencies: react (18+), Tailwind CSS in your app, and the Radix/lucide peers listed in package.json.

Quick start

import { ChatWindow, MessageList, MessageInput } from "@fluxy-chat/ui";
import { useChat } from "@fluxy-chat/react";

function Room({ roomId }: { roomId: string }) {
  const { messages, sendMessage } = useChat({ roomId });

  return (
    <ChatWindow>
      <MessageList messages={messages} />
      <MessageInput onSend={(text) => sendMessage(text)} />
    </ChatWindow>
  );
}

Exports

High-level

• ChatWindow, MessageList, MessageItem, MessageInput
• ChannelList, PresenceList, TypingUsersIndicator
• AgentMessage, AgentTypingIndicator
• ComposerToolsMenu, composer prompt helpers

Primitives (custom layouts)

• Message, Bubble, Composer, Attachment
• MessageScroller (virtualized scroll helpers)
• ReactionPicker, TypingIndicator, Marker
• Button, cn utility

Styling

Components use Tailwind utility classes and expect your app to provide design tokens (CSS variables or Tailwind theme). They do not ship a global stylesheet — import your Tailwind setup as usual.

Starter themes (PG-ZB-8)

Four preset token sets ship with the package:

import { ChatWindow, applyFluxyTheme, fluxyThemeStyle, type FluxyThemeId } from "@fluxy-chat/ui";

const theme: FluxyThemeId = "brand";

function App() {
  useEffect(() => applyFluxyTheme(theme), [theme]);
  return (
    <div className="fluxy-theme-brand" style={fluxyThemeStyle(theme)}>
      <ChatWindow {...props} />
    </div>
  );
}

Presets: default, dark, minimal, brand. Use getAllFluxyThemesCss() to inject CSS in global stylesheets.

Storybook

Preview chat primitives locally (default theme):

pnpm --filter @fluxy-chat/ui storybook

Build static Storybook for design review:

pnpm --filter @fluxy-chat/ui build-storybook

Stories live under src/**/*.stories.tsx (e.g. Bubble sent/received/typing variants).

License

MIT