Prose

The Prose component styles a block of rendered markdown - or any long-form HTML - with Cherry typography: the heading scale, underlined links with hover and focus states, bulleted and numbered lists, tables, inline code, blockquotes, rules, and media. Wrap the output of your markdown renderer in it and the content reads like the rest of the design system.

import React from "react";
import { Prose } from "cherry-styled-components";

export default function Article({ html }) {
  return <Prose dangerouslySetInnerHTML={{ __html: html }} />;
}

In the chat kit, pass <Prose $compact> as an assistant message's content to render a markdown reply at chat density.

A few conventions from the markdown pipeline are honored:

• Fenced code blocks (pre, .hljs) keep their highlighter theme; only inline code without a class gets the Cherry tint.
• Wrap wide tables in a <div className="table-wrapper"> to get horizontal scrolling with a slim scrollbar.
• Anchors that carry a class of their own, or that wrap an image, are left unstyled, so buttons and image links pass through untouched.
• First and last child margins are stripped, so the block sits flush inside whatever contains it (a card, a chat bubble, a callout).

Properties

The component also accepts all native <div> attributes and forwards its ref to the root element.

proseStyles

The styles are also exported as a mixin, proseStyles(theme, $compact?), for applying to an element that is already styled instead of wrapping it in another <div>:

import styled from "styled-components";
import { proseStyles } from "cherry-styled-components";

const ArticleBody = styled.article`
  ${({ theme }) => proseStyles(theme)};
  max-width: 720px;
`;