Changelog / added

⚠️ This update has been superseded. View the latest update →

Introducing the AI Chat Bubble

added January 15, 2026 · chat, ui, new-component

Live Preview — ai-chat-bubble-01
U
Can you explain what ShadCN UI is?
10:02 AM
C
Sure! ShadCN UI is a collection of accessible and composable React components built on top of Tailwind CSS, perfect for building modern UIs quickly.
10:03 AM

Why We Built This

Every AI product needs a way to display conversational messages. Our AI Chat Bubble component was designed from the ground up to feel native to modern AI interfaces — think ChatGPT, Claude, or Gemini.

Key Features

  • Typing indicator — A subtle pulsing animation shows when the AI is “thinking”
  • Avatar support — Distinct avatars for user vs. AI messages
  • Markdown rendering — Rich text formatting inside message bubbles
  • Timestamp display — Clean, relative timestamps (e.g. “2 min ago”)

Design Philosophy

We chose a minimal, rounded design to keep visual noise low. The bubble uses Shadcn’s Card primitives under the hood, which means it automatically respects your theme tokens — light mode, dark mode, or any custom palette.

Usage

import { AIChatBubble } from "@/registry/components/ai-chat-bubble-01";

<AIChatBubble
  role="assistant"
  content="Hello! How can I help you today?"
/>

This component pairs perfectly with the AI Chat Input and AI Chat Window components for a full conversational UI.

Update History — ai-chat-bubble-01