Prose
proseStyles rich-text descendants with consistent semantic typography tokens.
Usage
Basic typesetting
Insert the rendered rich text (HTML/JSX/MDX output) into Prose, and the title/paragraph/list/link/inline code uniformly eats the semantics of token.
Hulian typesetting container Prose
Prose takes over the rendered rich text (markdown→HTML, MDX output or handwritten JSX) into a consistent reading layout. Title, paragraph, list,Link,Inline code All references to semantics token, Automatic adaptation of light and dark themes.
Unordered list
- Zero dependency, can be rendered in RSC (use client is not added to the ontology)
- Used for emphasis Bold with Italic
- All colors and rounded corners go to token, don't write it to death
Code Block
import { Prose } from "@hulianui/ui";
<Prose>{htmlContent}</Prose>;Typography is a silent design - the container unifies the rules, and the content only cares about semantics.
Bottom paragraph, verify that the margins of the first and last sub-elements converge.
<Prose>
<h1>Hulian typesetting container Prose</h1>
<p>
Titles, paragraphs, lists, <a href="#">links</a>, <code>inline code</code> and quotes
All semantics token, light and dark themes are automatically adapted.
</p>
<ul>
<li>Zero dependency, can be rendered in RSC</li>
<li> emphasize with <strong>bold</strong> and <em>italic</em></li>
</ul>
<blockquote> Typography is a silent design. </blockquote>
</Prose>Compact size
size="sm" Reduce the standard font size to text-sm, which is suitable for sidebar descriptions and long text in cards.
Compact layout
Suitable for dense scenarios such as sidebar descriptions and long text in cards. The rest of the formatting rules remain the same.
- Sidebar Documentation
- Rich text in the card
<Prose size="sm">
<h2>Compact layout</h2>
<p> is suitable for dense scenes such as sidebar descriptions and long text in cards. The rest of the layout rules remain consistent. </p>
<ul>
<li>Sidebar Document</li>
<li>Rich text in the card</li>
</ul>
</Prose>When to use
Use Prose around already-rendered rich text such as Markdown-to-HTML output, MDX, or handwritten JSX. Descendant selectors give headings, paragraphs, lists, links, inline code, and blockquotes consistent typography across light and dark themes. If the content is a Markdown source string, use Markdown, which already wraps Prose. Use Text or Heading for atomic content rather than wrapping a single sentence.
Import
import { Prose } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | ElementType | "article" | Container element to render. |
| size | "sm" | "base" | "base" | Typography scale. sm uses a text-sm base for long content in sidebars or cards. |
Inherits HTMLAttributes<HTMLElement> (className / style, etc.).
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Rich text content (HTML/JSX) |
Example
<Prose className="max-w-2xl">
<h1>HulianUI typography with Prose</h1>
<p>Rendered rich text receives consistent styling for <a href="#">links</a> and <code>inline code</code>.</p>
<blockquote>Typography sets the rules while content preserves its semantics.</blockquote>
</Prose>Compact content:
<Prose size="sm" className="max-w-2xl">{/* Sidebar or card description */}</Prose>Usage guidelines
- See [[chat-bubble-max-w-prose-overflows-narrow-column]]:
max-w-prose(65ch, approximately 398 px) is an absolute maximum that does not account for parent width. In a narrow flex column it can overflow or clip. Usemax-w-[min(65ch,100%)]and addmin-w-0to flex ancestors. Do not combinemax-w-prose max-w-full; both set the same property, so stylesheet order decides which wins.
Related
Text · Heading · Markdown · AuroraText · AnimatedShinyText · AnimatedGradientText
Playground
Hulian Prose
Unified take over rich text typesetting, eat semantics token,Link with code Consistently presented.
Containers have unified rules, and the content only cares about semantics.
<Prose>{/* Rich text HTML/JSX */}</Prose>