Docs

Chat

A message row: avatar, header, bubble, footer.

Bubble colors

primary bubble
secondary bubble
accent bubble
neutral bubble
info bubble
success bubble

Real use · a short conversation

OW
Obi-Wan
You were the chosen one!
OW
It was said that you would destroy the Sith, not join them.
I hate you!
Delivered

Using Chat

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Chat — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class chat, with 13 modifiers:

  • .chat
  • .chat-bubble
  • .chat-bubble-accent
  • .chat-bubble-error
  • .chat-bubble-info
  • .chat-bubble-neutral
  • .chat-bubble-primary
  • .chat-bubble-secondary
  • .chat-bubble-success
  • .chat-bubble-warning
  • .chat-end
  • .chat-footer
  • .chat-header
  • .chat-image

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react
import { Chat } from "@wizeworks/silicaui-react";

Props

ChatProps
PropTypeRequiredDescription
sideChatSidenostart (incoming, avatar left) or end (outgoing, avatar right).
ChatBubbleProps
PropTypeRequiredDescription
colorChatBubbleColornoBubble color; maps to chat-bubble-<color>. Default neutral base-200.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source
import {
    Chat,
    ChatImage,
    ChatHeader,
    ChatBubble,
    ChatFooter,
    Avatar,
} from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";
import { COLORS } from "../lib/data";

export function ChatDemo() {
    return (
        <>
            <Section title="Bubble colors">
                <div className="flex flex-col gap-3">
                    {COLORS.slice(0, 6).map((color) => (
                        <Chat key={color} side="end">
                            <ChatBubble color={color}>{color} bubble</ChatBubble>
                        </Chat>
                    ))}
                </div>
            </Section>

            <Section title="Real use · a short conversation">
                <div className="flex max-w-md flex-col gap-1">
                    <Chat side="start">
                        <ChatImage>
                            <Avatar color="neutral" alt="Obi-Wan">
                                OW
                            </Avatar>
                        </ChatImage>
                        <ChatHeader>
                            Obi-Wan <time className="opacity-60">12:45</time>
                        </ChatHeader>
                        <ChatBubble>You were the chosen one!</ChatBubble>
                    </Chat>
                    <Chat side="start">
                        <ChatImage>
                            <Avatar color="neutral" alt="Obi-Wan">
                                OW
                            </Avatar>
                        </ChatImage>
                        <ChatBubble>
                            It was said that you would destroy the Sith, not join them.
                        </ChatBubble>
                    </Chat>
                    <Chat side="end">
                        <ChatBubble color="primary">I hate you!</ChatBubble>
                        <ChatFooter>Delivered</ChatFooter>
                    </Chat>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Chat — one message row. side: "end" flips it to the outgoing side. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors
import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Chat", "chat", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "chat chat-primary" rather than passing a colour as a prop.

Takes children
yes
Hydrated by
nothing — this one is static markup

The full API for Chat, on every path, is available through the Silica MCP server.