Docs

The HTML is deliberately class-free semantic markup, so it inherits whatever you already have. Unstyled it will look like a plain document — here are three ways to fix that, in increasing order of effort.

1. The stylesheet

import '@rillpage/sdk/styles.css'

<div className="rill-prose" ... />

Around 150 lines of plain CSS, scoped entirely to .rill-prose so it cannot leak into the rest of your site. It handles the three things people usually get wrong: code highlighting, tables that scroll instead of widening the page, and images that never overflow their column.

By default it inherits your fonts and colours rather than imposing its own, so articles read like the rest of your site out of the box.

2. Change the variables

Everything visual is a custom property. Override any of them anywhere:

.rill-prose {
  --rill-font: 'Charter', Georgia, serif;
  --rill-size: 1.125rem;
  --rill-leading: 1.8;
  --rill-accent: #0066ff;
  --rill-text: #1a1a1a;
  --rill-muted: #6b7280;
  --rill-border: #e5e7eb;
  --rill-surface: #f7f7f8;
  --rill-radius: 0.75rem;
  --rill-gap: 1.5rem;
}

3. Write your own

Skip the stylesheet entirely and target the elements yourself. The markup is ordinary HTML — h2, p, pre, table, blockquote, img — with two exceptions worth knowing: .shiki on highlighted code blocks, and ul[data-type="taskList"] on checklists.

Using Tailwind Typography

If your site already uses @tailwindcss/typography, prose gets you most of the way. One conflict to fix: prose sets colours on pre code, which overrides Shiki's inline styles and flattens highlighting to one colour.

<div className="prose dark:prose-invert rill-prose">
  ...
</div>

/* Let Shiki win inside code blocks */
.prose :where(pre code) {
  color: inherit;
}

Syntax highlighting on its own

If you take nothing else, take this. Colours are baked into the HTML at publish time as CSS variables, so there is no highlighter to load — these rules only choose which set to use.

.rill-prose .shiki,
.rill-prose .shiki span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

@media (prefers-color-scheme: dark) {
  .rill-prose .shiki,
  .rill-prose .shiki span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
}