caliper uidocs
DemoSign inGet Pro

Message

Free

One chat message with a role, optional name, status and actions.

Installs components/ui/message.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/message.json
Can you summarise the open pull requests?

Assistant

There are three open. Two are waiting on review and one has failing checks.

Assistant

Thinking…

When to use #

Use it for

  • Rendering a transcript from user and assistant turns.
  • You need a pending state for a reply still arriving.

Skip it when

  • The content is a comment in a discussion; use the comment thread.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/message.json

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Message, MessageBubble and MessageActions.

example.tsx
import { Message } from "@/components/ui/message"

export function MessageDemo() {
  return (
    <div className="grid gap-3">
      <Message role="user">Can you summarise the open pull requests?</Message>
      <Message role="assistant" name="Assistant">There are three open. Two are waiting on review and one has failing checks.</Message>
      <Message role="assistant" name="Assistant" status="pending">{null}</Message>
    </div>
  );
}

API reference #

Message

component
PropTypeDefaultDescription
role *"user" | "assistant" | "system"—
namestring—Shown above assistant and system messages.
avatarstring—
timestring—Display text for the time, for example "9:41 AM".
statusMessageStatus"complete"
statusTextstring—Replaces the default error or stopped sentence.
onRetry(() => void)—
actionsReactNode—Buttons shown under the message, such as MessageActions.
childrenReactNode—
classNamestring—

MessageBubble

component

No props of its own; it accepts the native props of its root element.

MessageActions

component
PropTypeDefaultDescription
textstring—What Copy puts on the clipboard.
onRegenerate(() => void)—
childrenReactNode—

Accessibility #

It is built on native elements and keeps aria-label, aria-busy and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.