FreeIllustrations

Illustration Chat

Use this component as a lightweight illustration for collaboration, messaging, booking, support, or onboarding sections.

ReactTailwind CSSMotionIllustration

Hey! Are you free for a quick call?

Sure, give me 5 minutes!

Sounds good thumbs up.

I'll bring the launch checklist.

Overview

A motion chat illustration with alternating message bubbles and avatar marks.

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

<IllustrationChat />

Illustration Chat.tsx

tsx

"use client";

import { motion } from "framer-motion";

const messages = [
  ["left", "Hey! Are you free for a quick call?"],
  ["right", "Sure, give me 5 minutes!"],
  ["left", "Sounds good thumbs up."],
  ["right", "I'll bring the launch checklist."],
];

export function IllustrationChat() {
  return (
    <div className="rounded-xl border border-slate-200 bg-white p-6 text-slate-900">
      <div className="mx-auto max-w-lg space-y-3">
        {messages.map(([side, message], index) => (
          <motion.div
            key={message}
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.08 }}
            className={"flex items-center gap-3 " + (side === "right" ? "justify-end" : "justify-start")}
          >
            {side === "left" && (
              <div className="h-9 w-9 rounded-full bg-gradient-to-br from-rose-400 to-sky-400" />
            )}
            <div className="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm shadow-sm">
              {message}
            </div>
            {side === "right" && (
              <div className="h-9 w-9 rounded-full bg-gradient-to-br from-sky-400 to-lime-300" />
            )}
          </motion.div>
        ))}
      </div>
    </div>
  );
}