Bubble

Chat message bubbles with variants, grouped corners, reactions and room for interactive content.

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/bubble

npx layro-cli add @preetsuthar17/bubble

npx layro-cli add @preetsuthar17/bubble

bunx layro-cli add @preetsuthar17/bubble

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

type BubbleShape = "uniform" | "joined" | "tail"

const BubbleShapeContext = React.createContext<BubbleShape | undefined>(
  undefined
)

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.