Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatBubble

The surface around a message, with seven variants and reactions.

Chat@gaudi/design-system/chat/ChatBubbleView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { ChatBubble } from '@gaudi/design-system/chat/ChatBubble';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/chat-bubble-quick-replies.json.

Usage

import { ChatBubble, ChatBubbleContent, ChatBubbleReactions } from '@gaudi/design-system/chat';
<ChatBubble variant='tinted' align='end'>  <ChatBubbleContent>Shipped to 4,180 readers.</ChatBubbleContent>  <ChatBubbleReactions align='start'>🎉 3</ChatBubbleReactions></ChatBubble>

Examples

Suggested replies under a question

Storybook

Bubble styles across a deploy thread

Storybook

Formatted answer with show more

Storybook

Support thread

Storybook

API

5 props

Accessibility

Label reactions; quick-reply bubbles must be real buttons through asChild.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesAccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples