How do I install the Vibe UI Message component?

You can install Message into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add message" in your terminal.

Does Vibe UI Message support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

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

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

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

pnpm dlx vibe-ui-kit@latest add message

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.

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

vibe-ui

How do I use the Message component in Next.js?

10:45 AM

Assistant • 10:46 AM

Import Message and MessageContent from '@/components/ui/message', then set align to 'start' or 'end'.

Prop	Type	Default	Description
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.