Logo

Styling

Adapters load two layers of CSS automatically:

  1. Functional reveal styles — animation, layout hold, table scrolling, code toolbar mechanics. These stay on even when you opt out of the theme.
  2. Default prose theme — headings, lists, links, quotes, code, tables, and images. It does not require Tailwind CSS and does not constrain the response width.

The theme is scoped to [data-smoothstream-theme="default"], uses zero-specificity :where() selectors, and is unlayered so a normal application stylesheet can override it without !important.

Tint the default theme

The palette is derived from one foreground token. Change that token to recolor body text, headings, markers, quotes, and code surfaces together.

<Smoothstream className="assistant-markdown" receiving={receiving}>  {text}</Smoothstream>
<Smoothstream class="assistant-markdown" :markdown="text" :receiving="receiving" />
createSmoothstream(container, {  className: "assistant-markdown",  receiving: true,});
assistant-message.css
.assistant-markdown {  --smoothstream-foreground: #3b2a20;}

Override a derived token when you need a sharper exception:

.assistant-markdown {  --smoothstream-heading-color: #7c2d12;}

Tokens you are likely to set

TokenTypical use
--smoothstream-foregroundRecolor the whole theme from one value.
--smoothstream-heading-colorHeadings only.
--smoothstream-link-colorLinks.
--smoothstream-font-monoInline and fenced code face.
--smoothstream-inline-code-font-sizeInline code size.
--smoothstream-code-font-sizeFenced code size. Follows inline size unless you set it.
--smoothstream-code-backgroundFenced block surface. Application tokens win over a Shiki theme.
--smoothstream-code-border-colorFenced block frame.
--smoothstream-table-border-colorOuter table frame.
--smoothstream-table-border-radiusOuter table corners.

Task-list checkboxes remain native disabled inputs. The default theme paints a consistent box; forced-colors mode restores the platform checkbox. Size, offset, border, radius, checked fill, and check image each have tokens (--smoothstream-task-*).

Wide tables sit in a stationary frame ([data-smoothstream-table-shell]) around a nested scroll viewport. Style the frame through the table border tokens, or, with unstyled, target that hook. Style table / th / td for typography and cells. The semantic table is not a direct child of the Markdown root.

Use your own prose styles

Set unstyled to drop the default theme. Functional reveal CSS remains.

<Smoothstream className="prose max-w-none" unstyled receiving={receiving}>  {text}</Smoothstream>
.assistant-markdown [data-smoothstream-table-shell] {  border: 1px solid #d6d3d1;  border-radius: 0.75rem;}

Body copy inherits the surrounding font and size. The default theme does not pin a root rem; heading and spacing tokens that use em scale from the host.

© 2026 Smoothstream. All rights reserved.

Built with Radiant Docs