Message
An author, message content, and timestamp.
Upstream documentationExamples
Example author
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Message
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/message.json'Usage
A complete example using the installed component and hook paths.
Message usage
"use client";import { Avatar, AvatarFallback } from "@/components/ui/avatar";import { Bubble, BubbleContent } from "@/components/ui/bubble";import { Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader } from "@/components/ui/message";const MessagePreview = function MessagePreview() { return ( <Message> <MessageAvatar> <Avatar> <AvatarFallback>NA</AvatarFallback> </Avatar> </MessageAvatar> <MessageContent> <MessageHeader>Example author</MessageHeader> <Bubble variant="secondary"> <BubbleContent>Here is the neutral baseline.</BubbleContent> </Bubble> <MessageFooter> <time dateTime="10:42">10:42</time> </MessageFooter> </MessageContent> </Message> ); };export default function Demo() { return <MessagePreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
MessageGroup
MessageGroup props
React.ComponentProps<"div">Message
Message props
React.ComponentProps<"div"> & { align?: "start" | "end" }- align
- "start"
MessageAvatar
MessageAvatar props
React.ComponentProps<"div">MessageContent
MessageContent props
React.ComponentProps<"div">MessageFooter
MessageFooter props
React.ComponentProps<"div">MessageHeader
MessageHeader props
React.ComponentProps<"div">