Content

Message

Messages with content and actions.

Message

Messages with content and actions.

Content

Studio assistantnow

Every component is visible in its own context.

Source-first

View component

Install

npx shadcn@latest add http://localhost:3000/r/message.json

Usage

"use client"

import {
  Message,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"

export function Example() {
  return (
    <Message className="w-full max-w-xs">
      <MessageHeader>
        <span className="font-medium">Studio assistant</span>
        <span className="text-muted-foreground">now</span>
      </MessageHeader>
      <MessageContent>
        Every component is visible in its own context.
      </MessageContent>
      <MessageFooter>
        <span>Source-first</span>
      </MessageFooter>
    </Message>
  )
}

API

MessageGroupMessageMessageAvatarMessageContentMessageFooterMessageHeader

function MessageGroup(props: React.ComponentProps<"div">)

function Message(props: React.ComponentProps<"div"> & { align?: "start" | "end" })

function MessageAvatar(props: React.ComponentProps<"div">)

function MessageContent(props: React.ComponentProps<"div">)

function MessageHeader(props: React.ComponentProps<"div">)

function MessageFooter(props: React.ComponentProps<"div">)

Source code +

import * as React from "react"
import { cn } from "cn"

function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="message-group"
      className={cn("flex min-w-0 flex-col gap-2", className)}
      {...props}
    />
  )
}

function Message({
  className,
  align = "start",
  ...props
}: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
  return (
    <div
      data-slot="message"
      data-align={align}
      className={cn(
        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
        className
      )}
      {...props}
    />
  )
}

function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="message-avatar"
      className={cn(
        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
        className
      )}
      {...props}
    />
  )
}

function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="message-content"
      className={cn(
        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
        className
      )}
      {...props}
    />
  )
}

function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="message-header"
      className={cn(
        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
        className
      )}
      {...props}
    />
  )
}

function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="message-footer"
      className={cn(
        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
        className
      )}
      {...props}
    />
  )
}

export {
  MessageGroup,
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
}

Registry JSON ↗