💬 Chatana — A Lightweight Chat UI Library for React

Elegant, responsive, and fully customizable chat components built with React + Tailwind CSS.

📷 Screenshots

🚀 Features

• ⚡ Lightweight and fast — built with Vite and React
• 🎨 Fully customizable themes — light, dark, blue and others ... or your own custom CSS variables
• 💬 Beautiful UI — includes message bubbles, avatars, file previews, and typing indicators
• 🧠 Smart layout — responsive and adaptive to any parent container
• ⚙️ Easy integration — plug and play in any React project
• 💾 Optional utilities — message statuses, emoji picker, custom headers, and more
• 🧩 TypeScript ready — full type definitions included

📦 Installation

npm install @kmalek101/chatana
# or
yarn add @kmalek101/chatana

Make sure you also have react and react-dom installed.

💻 Basic Usage :

import { ChatContainer } from "@kmalek101/chatana";
import "@kmalek101/chatana/dist/style.css";

export default function App() {
  const currentUserId = "user-1";

  const initialMessages = [
    {
      id: 1,
      content: "Hello there 👋",
      senderId: "user-2",
      timestamp: Date.now(),
      status: "delivered",
    },
  ];

  return (
    <ChatContainer
      currentUserId={currentUserId}
      initialMessages={initialMessages}
      onSendMessage={(msg) => console.log("Sent:", msg)}
      showHeader
      showInput
      autoScroll
    />
  );
}

🎨Theming :

Chatana comes with a pre built in themes which are : light - dark - blue - purple - pink - red

but you can always add yours by either creating a theme and passing it through the prop theme we'll see it later in the docs ... or by creating your own theme in your css file like so :

[data-theme="your_theme_name"] {

--chat-bg: #ffffff; <---- your colors

--chat-text: #0f172a;

--chat-primary: #2563eb;

--chat-primary-hover: #1e40af;

--chat-primary-text: #ffffff;



--chat-header-bg: #f9fafb;

--chat-header-title: #0f172a;

--chat-header-subtext: #6b7280;



--chat-bubble-user-bg: #2563eb;

--chat-bubble-other-bg: #f1f5f9;

--chat-bubble-other-text: #1e293b;



--chat-btn-filled-bg: var(--chat-primary);

--chat-btn-filled-hover: var(--chat-primary-hover);

--chat-btn-filled-text: #ffffff;



--chat-btn-ghost-text: #64748b;

--chat-btn-ghost-hover-bg: #f8fafc;



--chat-border: #e2e8f0;

--chat-radius: 9999px;



--chat-icon: #64748b;

--chat-icon-color: #94a3b8;

--chat-icon-hover-color: #334155;

--chat-icon-hover-bg: #f1f5f9;



--chat-input-bg: #f8fafc;

--chat-input-text: #0f172a;

--chat-input-placeholder: #94a3b8;

--chat-input-border: #cbd5e1;

--chat-input-border-focus: var(--chat-primary);

--chat-input-bg-focus: #ffffff;



--chat-send-bg: var(--chat-primary);

--chat-send-hover-bg: var(--chat-primary-hover);

--chat-send-text: #ffffff;

--chat-send-disabled-bg: #e2e8f0;

--chat-send-disabled-text: #94a3b8;



--chat-timestamp-text: #64748b;

--chat-timestamp-line: #e2e8f0;



--chat-scrollbar-thumb: #cbd5e1;

--chat-scrollbar-track: transparent;



--chat-timestamp-margin: 0.5rem;

}

or you can just modify the exisitng themes to make them match your own personal preference .

📄 Docs :

⚙️ Props

| Prop | Type | Default | Description | | ---------------------------- | -------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------- | | children | ReactNode | - | Custom elements to render inside the chat container | | header | ReactNode | - | Custom header component (e.g., user info, call buttons) | | footer | ReactNode | - | Custom footer element (e.g., "End of conversation") | | messageList | ReactNode | - | Custom message list component | | messageBubble | ReactElement | - | Custom message bubble component | | input | (params: { value: string; onChange: (e) => void; onKeyDown: (e) => void; onSend: () => void; }) => ReactNode | - | Fully customizable input component | | initialMessages | Message[] | [] | Array of initial chat messages | | currentUserId | string | - | ID of the current user (used to differentiate messages) | | senderAvatar | string | - | Avatar URL of the sender (current user) | | autoScroll | boolean | true | Automatically scrolls to the latest message when a new one is added | | showHeader | boolean | true | Toggle visibility of the header | | showInput | boolean | true | Toggle visibility of the input area | | showScrollBar | boolean | false | Displays scrollbar in the message list | | showTypingIndicator | boolean | false | Displays typing indicator when active | | showMessagesStatus | boolean | - | Shows message statuses (e.g., sending, delivered, seen) | | showActionsBar | boolean | false | Shows actions bar for messages (e.g., reactions, menu) | | showActionsBarMethod | "hover" | "right-click" | "left-click" | "hover" | Determines how the actions bar appears | | showHeaderIcons | boolean | true | Displays icons (call, video, menu) in the header | | showInputIcons | boolean | true | Displays icons (emoji, upload, etc.) in the input field | | showTimestampCentered | boolean | true | Centers timestamps between grouped messages | | showTimeStamps | boolean | true | Displays timestamps for individual messages | | className | string | "" | Custom CSS classes applied to the chat container | | previewFileModal | ReactElement<FilePreviewModalProps> | - | Custom file preview modal component | | fileBubble | ReactElement<fileBubbleProps> | - | Custom file message bubble component | | showDownloadButton | boolean | true | Toggles visibility of download button in file bubbles | | showEmojisButton | boolean | true | Toggles visibility of emoji button in the input bar | | theme | "light" | "dark" | string | "light" | Defines the current theme or custom theme name | | senderMessageClassName | string | - | Additional styles for messages sent by the current user | | receiverMessageClassName | string | - | Additional styles for messages received from others | | onSendMessage | (message: string) => void | - | Callback triggered when a message is sent | | onUploadFile | (file: File) => void | - | Callback triggered when a file is uploaded | | onDownloadFile | (file: any) => void | - | Callback triggered when a file is downloaded | | onPreviewFile | (file: any) => void | - | Callback triggered when a file is previewed | | onClickEmojisButton | () => void | - | Callback triggered when the emoji button is clicked |

🧑‍💻 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to fork this repository and submit a pull request.