Bubble: HextaUI and shadcn/ui

The HextaUI Bubble keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.

At a glance

MeasureHextaUIshadcn/ui
Exported parts44
Props the wrapper handles105
Lines of source243127
npm dependencies@base-ui/react@^1.8.0class-variance-authoritycncn
Built fromtheme–

More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.

Variants

PropIn bothOnly HextaUIOnly shadcn/ui
shapeBubble–uniformjoinedtail–

The HextaUI version

I checked the registry output and removed the stale route.
Nice, thanks!
Did the preview deploy pick it up?
Yes. The preview at build 1482 serves the new route, and the old one now returns a 404 as expected.
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble"

export function BubbleDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble variant="secondary">
        <BubbleContent>
          I checked the registry output and removed the stale route.
        </BubbleContent>
        <BubbleReactions role="img" aria-label="Reactions: thumbs up">
          <span>👍</span>
        </BubbleReactions>
      </Bubble>
      <BubbleGroup>
        <Bubble align="end">
          <BubbleContent>Nice, thanks!</BubbleContent>
        </Bubble>
        <Bubble align="end">
          <BubbleContent>Did the preview deploy pick it up?</BubbleContent>
        </Bubble>
      </BubbleGroup>
      <Bubble variant="ghost">
        <BubbleContent>
          Yes. The preview at build 1482 serves the new route, and the old one
          now returns a 404 as expected.
        </BubbleContent>
      </Bubble>
    </div>
  )
}

Every state, the keyboard map and the API reference are on the component page.

12 of its examples also have a page of their own.

Switch one component

Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble.json --overwrite
  • Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
  • Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.

Other components compared

More comparisons