BrutalLab UI
en
EnglishEspañol
PatternAvailable

Message

Conversation structure for author, content, and message metadata.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/message.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import {
  MessageGroup,
  Message,
  MessageContent,
  MessageHeader,
  MessageFooter,
} from '@/components/ui/message';
import { Bubble, BubbleContent } from '@/components/ui/bubble';

export default function Demo() {
  return (
    <MessageGroup className="w-full max-w-lg">
      <Message>
        <MessageContent>
          <MessageHeader>
            <strong>Alex</strong>
          </MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>
              The new components are ready to review.
            </BubbleContent>
          </Bubble>
          <MessageFooter>
            <time dateTime="2026-09-12T10:30:00">10:30</time>
          </MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • A surface or content, not a control by default. No artificial hover, pressed or focus state.
  • Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
classNamestring?Extends the root visual styles without changing its semantics.
childrenReactNode?Compose the exported subcomponents as shown in the runnable example.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep speaker identity and time available as text. Add a live region only for new incoming messages.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.