Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de burbuja de chat

Última actualización:

Componente de burbuja de chat CSS Tailwind solo para CSS. Posiciones inicial y final para mensajes enviados y recibidos, con avatar y espacios de marca de tiempo. WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de chat muestran mensajes conversacionales en un formato organizado y legible. Construidas con HTML semántico y diseños flexibles, las burbujas de chat representan mensajes tanto del usuario como del sistema. El sistema de chat Frutjam admite múltiples colores, alineaciones y estilos, ideal para interfaces de mensajería, paneles de atención al cliente y UI conversacional.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
chatBaseEnvoltorio para una sola fila de mensajes de chat
chat-bubbleModificadorBurbuja de mensaje con estilo
chat-avatarModificadorAvatar mostrado junto al mensaje
chat-headerModificadorNombre del remitente o metadatos encima de la burbuja
chat-footerModificadorMarca de tiempo o estado debajo de la burbuja
chat-startModificadorAlinea la burbuja a la izquierda (mensaje entrante)
chat-endModificadorAlinea la burbuja a la derecha (mensaje saliente)
chat-xsTamañoextrapequeño
chat-smTamañoPequeño
chat-mdTamañoMedio (predeterminado)
chat-lgTamañoGrande
chat-xlTamañoExtra grande
chat-bubble-primaryColorBurbuja de color del tema principal
chat-bubble-secondaryColorBurbuja de color del tema secundario
chat-bubble-accentColorBurbuja de color del tema de acento
chat-bubble-neutralColorBurbuja de color de tema neutro
chat-bubble-infoColorBurbuja de color semántica de información
chat-bubble-successColorBurbuja de color semántica de éxito
chat-bubble-warningColorBurbuja de color semántica de advertencia
chat-bubble-errorColorBurbuja de color semántica de error

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>

Chatea con 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>

Tamaños de chat

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 chat

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>

Encabezado y pie de página del chat

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>

Hilo de conversación

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 u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Charlar según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP