Docs

Prose

Typographic defaults for a block of rich/markdown content.

Real use · rendered article body

Launch checklist

Draft the announcement in rich text — headings, lists, and links all export as clean HTML.

  • Write the copy
  • Add screenshots
  • Link the changelog
Ship small, ship often.

Inline code and block code both pick up themed styling automatically.

Sizes

size="sm" rescales the whole block by one root font-size.

size="lg" rescales the whole block by one root font-size.

Using Prose

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 Prose — it needs no JavaScript, so the classes below are the whole story.

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

Root class prose, with 5 modifiers:

  • .prose
  • .prose-lg
  • .prose-md
  • .prose-sm
  • .prose-xl
  • .prose-xs

React

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

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

Props

PropTypeRequiredDescription
sizeProseSizenoDefault md. Rescales the whole block by one root font-size.

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 { Prose } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function ProseDemo() {
    return (
        <>
            <Section title="Real use · rendered article body">
                <Prose>
                    <h2>Launch checklist</h2>
                    <p>
                        Draft the announcement in <strong>rich text</strong> — headings,
                        lists, and links all export as clean HTML.
                    </p>
                    <ul>
                        <li>Write the copy</li>
                        <li>Add screenshots</li>
                        <li>
                            Link the <a href="#">changelog</a>
                        </li>
                    </ul>
                    <blockquote>Ship small, ship often.</blockquote>
                    <p>
                        Inline <code>code</code> and block code both pick up themed
                        styling automatically.
                    </p>
                </Prose>
            </Section>

            <Section title="Sizes">
                <div className="flex flex-col gap-6">
                    {(["sm", "lg"] as const).map((size) => (
                        <Prose key={size} size={size}>
                            <p>
                                <code>size=&quot;{size}&quot;</code> rescales the whole block
                                by one root font-size.
                            </p>
                        </Prose>
                    ))}
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Prose — lowers to <div>, holding its children. 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("Prose", "prose", { /* 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 "prose prose-primary" rather than passing a colour as a prop.

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

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