Chat Bubble

iChat gradient bubbles with sculpted tails, in blue and orange.

hey, did you ship the registry?

just did. npx shadcn add @aqua/chat-bubble

gorgeous

installnpx shadcn@latest add @aqua/chat-bubble

Usage

import { ChatBubble, ChatPanel } from "@/components/ui/chat-bubble"

<ChatPanel>
  <ChatBubble>hey, did you ship the registry?</ChatBubble>
  <ChatBubble from="them">just did.</ChatBubble>
</ChatPanel>

The tails are sculpted from two pseudo-elements, so bubbles need the solid panel background to sit on. ChatPanel provides it and exposes it as the --chat-panel variable if you restyle.