Docs

Chat Suite

The Chat suite — a higher-level layer over the chat/chat-bubble primitives (chat.js): a scrollable message layout, a composer, and the small extras a real conversation needs (system dividers, grouped metadata, a collapsible tool-call detail).

Real use · full conversation screen (layout + composer + system/tool messages)

Today
S
Hi! Ask me anything about the design system.
Silica Assistant
Y
What's the token for the primary color?
You

Using Chat Suite

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 ships no JavaScript, so a component that needs interaction is styled but inert.

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

Root class chat-composer, with 11 modifiers:

  • .chat-composer
  • .chat-composer-actions
  • .chat-composer-field
  • .chat-layout
  • .chat-layout-messages
  • .chat-message-metadata
  • .chat-system-message
  • .chat-tool-calls
  • .chat-typing
  • .chat-typing-dot
  • .collapsible-content
  • .collapsible-trigger

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