Tile UI React
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/react';

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/react';
 
<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

ItemPurpose
messageComponent source and module styles
bubbleMessage surface and visual variants
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Message

PropTypeDefault
align'start' | 'end'—
PreviousMenubarNextMessageScroller