UI Skillbook
2

Message

The layout of one chat turn: content, footer actions and, between people, an avatar and header.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-message and follow the Siteplane Message skill it prints for this task.

Paste this into your agent.

Message arranges a single turn in a conversation, placing bubbles, attachments, traces and actions in the right order and on the right side. It draws no surface itself and keeps no state.

Install

bashnpx shadcn@4.18.0 add @siteplane/message

Import it from @/siteplane/components/message. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Bubble: Use Bubble inside a Message for the text surface itself.
  • vs Marker: Pick Marker for a line that is not a turn, such as a date or system note.
  • vs Message Scroller: Wrap many Messages in a Message Scroller for the thread's scrolling and announcements.

Rules

  • Compose Message with MessageContent, and add MessageHeader, MessageFooter and MessageAvatar as needed.
  • Set align="end" for the writer's own turns and give the Bubbles inside the same align.
  • Back-to-back messages from the same sender belong in one MessageGroup; give the earlier ones an empty MessageAvatar to keep them aligned.
  • Each footer icon action needs an aria-label. A footer with nothing in it takes up no space, so it is safe to render before any actions arrive.
  • Show a failed reply as a destructive Bubble with a Try again button and no rating actions.

Reference

  • Message docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-message

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Adaptby pbakaus

Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.

InteractionExternalGitHub stars: 95.1K

Animateby pbakaus

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

MotionExternalGitHub stars: 95.1K

Animate Expoby emilkowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

MotionExternalGitHub stars: 51.4K

Animation on Scrollby MengTo

Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.

MotionExternalGitHub stars: 7.1K

Back to Siteplane UI