Tile UI Vue
Source code

Components

Bubble

Bubble chat primitives.

Use Bubble to build chat message bubbles.

Hello there
Hi! How can I help?
import { BubbleGroup, Bubble, BubbleContent } from '@tile-ui/vue';
 
export default function BubbleDemo() {
	return (
		<BubbleGroup>
			<Bubble align="start">

Registry install

pnpm dlx shadcn@latest add @tile-ui/bubble

Package usage

import { BubbleGroup, Bubble, BubbleContent } from '@tile-ui/vue';
 
<BubbleGroup>
	<Bubble align="start">
		<BubbleContent>Hello</BubbleContent>
	</Bubble>
</BubbleGroup>

Highlights

  • Seven variants
  • Start and end alignment
  • Reactions

Registry dependencies

Item Purpose
bubble Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Bubble

Prop Type Default
variant 'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive' —
align 'start' | 'end' —

BubbleContent

Prop Type Default
asChild boolean —

BubbleReactions

Prop Type Default
side 'top' | 'bottom' —
align 'start' | 'end' —
PreviousBreadcrumbNextButton