Tile UI Vue
Source code

Components

Message

Message primitives.

Use Message to compose chat messages with avatar, content, and header.

Hi there
Hey! What can I help with?
import { Bubble, BubbleContent, MessageGroup, Message, MessageContent } from '@tile-ui/vue';
 
export default function MessageDemo() {
	return (
		<MessageGroup>
			<Message align="end">

Registry install

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

Package usage

import { Bubble, BubbleContent, MessageGroup, Message, MessageContent } from '@tile-ui/vue';
 
<MessageGroup>
	<Message align="end">
		<MessageContent>
			<Bubble align="end">
				<BubbleContent>Hi there</BubbleContent>
			</Bubble>
		</MessageContent>
	</Message>
</MessageGroup>

Highlights

  • Start and end alignment
  • Avatar, content, header, and footer
  • Explicit Bubble composition for message surfaces
  • Group

Registry dependencies

Item Purpose
message Component source and module styles
bubble Message surface and visual variants
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Message

Prop Type Default
align 'start' | 'end' —
PreviousMenubarNextMessageScroller