Skip to Content
Docs🚀 ⏐ Getting StartedSetup

Getting Started

Requirements

reachat targets modern React projects. Make sure your app meets these peer requirements before installing:

  • React 19 (also supports React 18 in most cases)
  • reablocks 10
  • Tailwind CSS 4+

Installing

Install reachat in your project by following the steps below.

1. Install the package

npm i reachat --save

2. Install reablocks and Tailwind

reachat is built on top of reablocks  and Tailwind CSS v4 . Use the reablocks CLI to scaffold both at once:

npx reablocks-cli@latest init

If your project already has Tailwind set up, the CLI detects it and skips the bootstrap. Otherwise it installs Tailwind v4 and wires the imports into your CSS entry point. To wire it up manually instead, install Tailwind per the v4 installation guide , then add the following to your CSS entry point:

@import 'tailwindcss';
@import 'reablocks/index.css';
 
/* Let Tailwind scan reablocks and reachat for the utility classes they use.
 * Paths are relative to this CSS file — adjust if yours lives elsewhere. */
@source '../node_modules/reablocks';
@source '../node_modules/reachat';

Tailwind v4 is configured entirely in CSS — no JavaScript config file is needed. Customize design tokens with the @theme directive; see the theme guide.

Finally, wrap your application with the ThemeProvider component from reablocks:

import { ThemeProvider, theme } from 'reablocks';
 
export const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
);

3. Include Chat components in your project

import {
  Chat,
  ChatInput,
  NewSessionButton,
  SessionGroups,
  SessionListItem,
  SessionMessage,
  SessionMessages,
  SessionMessagePanel,
  SessionMessagesHeader,
  SessionsGroup,
  SessionsList,
} from "reachat";
 
export default function App() {
  return (
    <Chat sessions={[]}>
      <SessionsList>
        <NewSessionButton />
        <SessionGroups>
          {(groups) =>
            groups.map(({ heading, sessions }) => (
              <SessionsGroup heading={heading} key={heading}>
                {sessions.map((s) => (
                  <SessionListItem key={s.id} session={s} />
                ))}
              </SessionsGroup>
            ))
          }
        </SessionGroups>
      </SessionsList>
      <SessionMessagePanel>
        <SessionMessagesHeader />
        <SessionMessages>
          {(conversations) =>
            conversations.map((conversation) => (
              <SessionMessage
                key={conversation.id}
                conversation={conversation}
              />
            ))
          }
        </SessionMessages>
        <ChatInput />
      </SessionMessagePanel>
    </Chat>
  );
}

4. Connect your backend

reachat is provider-agnostic — wire it up to whichever backend or model you prefer:

Example Repo

For a complete working app, see the reachat-example  repository.

Next steps

👋 ⏐ IntroductionGetting Started