Bubble Variants Demo for React Base UI

This is the default primary bubble.

This is the secondary variant.

This one is muted. It uses a lower emphasis color for the chat bubble.

👍

This one is tinted. The tint is a softer color derived from the primary color.

We can also use an outlined variant.

Or a destructive variant with a reaction.

🔥

Ghost bubbles work for assistant text, markdown, and other content that should not be framed.

This is perfect for assistant messages that should not have a frame and can take the full width of the container. You can also render code in it.

Ghost bubbles are full width and can take the full width of the container.

Get instant access to the code

72 lines of TypeScript, free with an account. Sign in once and every component and demo is yours.

Get your install command

Your install command, free with an account. Sign in once and every component and demo is yours.

Adds components/ui/bubble.tsx, with @base-ui/react and tailwind-variants. Then paste the demo from the Code tab.