104Get started
HextaUI

Bubble: Alignment

align="end" pushes a bubble to the end of the row for the current user’s messages. It follows the reading direction.

Aligned to the start.
Aligned to the end.
import { Bubble, BubbleContent } from "@/components/ui/bubble"

export function BubbleAlignment() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble variant="secondary" align="start">
        <BubbleContent>Aligned to the start.</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Aligned to the end.</BubbleContent>
      </Bubble>
    </div>
  )
}

Add this example

This adds the example as components/examples/bubble/alignment.tsx, together with the Bubble component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble-alignment.json

To add only the component, follow the Bubble installation.

Props in this example

The Bubble props this example sets, from the API reference.

Bubble

PropTypeDefault
variant
"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive""default"
align
"start" | "end""start"

Every prop is in the Bubble API reference.

More Bubble examples

See them all, with keyboard support and accessibility notes, on the Bubble page.

Related components