@allem-ui/chat

AI chat interface components for Allem UI -- chat bubbles, typing indicators, message groups, and syntax-highlighted code blocks.

Installation

npm install @allem-ui/chat @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/chat";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import {
  ChatContainer,
  ChatList,
  ChatBubble,
  ChatInput,
  TypingIndicator,
} from "@allem-ui/chat";

export function ChatApp() {
  return (
    <ChatContainer>
      <ChatList>
        <ChatBubble variant="received">Hello! How can I help?</ChatBubble>
        <ChatBubble variant="sent">Tell me about Allem UI.</ChatBubble>
        <TypingIndicator />
      </ChatList>
      <ChatInput placeholder="Type a message..." />
    </ChatContainer>
  );
}

Components

| Component | Description | |-----------|-------------| | ChatContainer | Top-level wrapper for the chat interface | | ChatList | Scrollable message list container | | ChatBubble | Individual chat message bubble | | ChatInput | Message input field with send action | | TypingIndicator | Animated typing dots indicator | | MessageGroup | Groups consecutive messages from the same sender | | CodeBlock | Syntax-highlighted code block for messages |

Features

• AI-ready -- Built for AI chat interfaces with sent/received message variants
• Code blocks -- Syntax-highlighted code rendering inside messages
• Typing indicator -- Animated dots for real-time typing feedback
• Message grouping -- Automatically groups consecutive messages
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with exported prop types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem