FreeChat

Chat Bubble Thread

Use this component for messaging apps, AI chat previews, support pages, and collaboration product mockups.

ReactTailwind CSSMotionChat

Can we launch Friday?

Yes, QA is green.

Ship it then.

Overview

A clean animated chat thread with alternating message bubbles.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ChatBubbleThread />

Chat Bubble Thread.tsx

tsx

"use client";

import { motion } from "framer-motion";

const messages = [["left", "Can we launch Friday?"], ["right", "Yes, QA is green."], ["left", "Ship it then."]];

export function ChatBubbleThread() {
  return (
    <div className="max-w-md space-y-3">
      {messages.map(([side, text], index) => (
        <motion.div
          key={text}
          initial={{ opacity: 0, y: 8 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.08 }}
          className={"flex " + (side === "right" ? "justify-end" : "justify-start")}
        >
          <span className={"max-w-xs rounded-2xl px-4 py-2 text-sm " + (side === "right" ? "bg-lime-300 text-zinc-950" : "bg-zinc-900 text-white")}>
            {text}
          </span>
        </motion.div>
      ))}
    </div>
  );
}