PatternDisponible

Bubble

Burbujas de mensajes con alineación y variantes semánticas.

Can I customize these components?

Yes. The source belongs in your project.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/bubble.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { BubbleGroup, Bubble, BubbleContent } from '@/components/ui/bubble';

export default function Demo() {
  return (
    <BubbleGroup className="w-full max-w-md">
      <Bubble>
        <BubbleContent>Can I customize these components?</BubbleContent>
      </Bubble>
      <Bubble align="end" variant="secondary">
        <BubbleContent>Yes. The source belongs in your project.</BubbleContent>
      </Bubble>
    </BubbleGroup>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
align	start / end	start	Message alignment.
variant	default / secondary / muted / tinted / outline / ghost / destructive	default	Bubble treatment.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.