Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de balão de bate-papo

Última atualização:

Componente de bolha de bate-papo Tailwind CSS somente CSS. Posições inicial e final para mensagens enviadas e recebidas, com slots de avatar e carimbo de data/hora. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de bate-papo exibem mensagens de conversação em um formato legível e organizado. Construídos com HTML semântico e layouts flexíveis, os balões de bate-papo representam mensagens do usuário e do sistema. O sistema de bate-papo Frutjam oferece suporte a várias cores, alinhamentos e estilos – ideal para interfaces de mensagens, painéis de suporte ao cliente e interface de conversação.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
chatBaseWrapper para uma única linha de mensagem de bate-papo
chat-bubbleModificadorBolha de mensagem estilizada
chat-avatarModificadorAvatar exibido ao lado da mensagem
chat-headerModificadorNome do remetente ou metadados acima do balão
chat-footerModificadorCarimbo de data e hora ou status abaixo do balão
chat-startModificadorAlinha o balão à esquerda (mensagem recebida)
chat-endModificadorAlinha o balão à direita (mensagem de saída)
chat-xsTamanhoExtra pequeno
chat-smTamanhoPequeno
chat-mdTamanhoMédio (padrão)
chat-lgTamanhoGrande
chat-xlTamanhoExtra grande
chat-bubble-primaryCorBolha de cor do tema principal
chat-bubble-secondaryCorBolha de cor do tema secundário
chat-bubble-accentCorBolha de cores do tema de destaque
chat-bubble-neutralCorBolha de cor de tema neutro
chat-bubble-infoCorBolha de cor semântica de informações
chat-bubble-successCorBolha de cor semântica de sucesso
chat-bubble-warningCorBolha de cor semântica de aviso
chat-bubble-errorCorErro de bolha de cor semântica

Uso Básico

1
2
3
4
5
6
7
<div class="chat chat-start">
  <div class="chat-bubble">Hello! How are you?</div>
</div>

<div class="chat chat-end">
  <div class="chat-bubble">I'm doing great, thanks!</div>
</div>

1
2
3
4
5
6
7
<div className="chat chat-start">
  <div className="chat-bubble">Hello! How are you?</div>
</div>

<div className="chat chat-end">
  <div className="chat-bubble">I'm doing great, thanks!</div>
</div>

Conversar com Avatar

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>

Tamanhos de bate-papo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>

Estilos de bate-papo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>

Cabeçalho e rodapé do bate-papo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>

Tópico de conversa

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Bater papo e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP