Vibe UI
Initializing Vibe UI System...
Vibe UI

Message

A layout system for chatbot dialogue timelines, message bubble sequences, and status receipts.

Message

A layout system for chatbot dialogue timelines, message bubble sequences, and status receipts.

Preview

Hello! How can I help you build Vibe UI library today?

Installation

pnpm dlx vibe-ui-kit@latest add message

Themes

Explore message bubble aesthetics and alignments side-by-side.

Hello! How can I help you build Vibe UI library today?
I want to add some remaining Vibe UI components natively.
Sure! Let's choose Input OTP and Menubar.
Perfect. Added backdrop filters to support transparency preset themes.
YES! Neo brutalist borders look extremely clean.
Neon aura glows can be enabled in settings dashboard panels.
SYS_LOG: Message packet resolved successfully inside monorepos.

Examples

A full AI Chat Application layout built using Message, MessageHeader, MessageFooter, Marker, Input, and Button primitives.

Assistant Chat

vibe-ui
How do I use the Message component in Next.js?
ME
10:45 AM
AI
Assistant • 10:46 AM
Import Message and MessageContent from '@/components/ui/message', then set align to 'start' or 'end'.

Props

Message

PropTypeDefaultDescription
align'start' | 'end''start'Alignment direction of the message bubble (start for incoming, end for outgoing).
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'The visual aesthetic theme to apply to the message bubble container.

MessageContent

PropTypeDefaultDescription
classNamestring-Additional utility styles for background colors, rounded borders, or text sizing.

MessageGroup

PropTypeDefaultDescription
classNamestring-Container layout wrapper for stacking conversation dialogue timelines.

MessageHeader

PropTypeDefaultDescription
classNamestring-Top metadata label wrapper for sender names and timestamps.

MessageFooter

PropTypeDefaultDescription
classNamestring-Bottom metadata label wrapper for status indicators and read receipt ticks.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Message | Vibe UI