Prose Article

The centered reading column for long-form pages, plus the muted BackLink that sits above a detail page.

The reading column for long-form pages — About, a blog post, a changelog. A 3xl measure, centered, with the page's vertical rhythm. BackLink is the muted "‹ back to …" link that sits above a detail page.

Both were hand-rolled identically on Yunxin's About and blog post pages.

Import

tsx

1import { ProseArticle, BackLink } from "@yuhuanowo/yunui/patterns";

Basic

Reading column

A considered measure

Long-form text wants a line length the eye can track. This column caps at a 3xl measure and centres itself, so an article reads the same on About, on a post, and on a changelog.

Turning off Typography

prose adds Tailwind Typography's classes. Turn it off when the content already ships its own styles — notably YunUI's MarkdownRenderer, which would otherwise be styled twice.

tsx

1<ProseArticle prose={false}>
2  <MarkdownRenderer content={md} />
3</ProseArticle>

Back link

BackLink routes through the adapter's Link, so it uses your framework's router.

tsx

1<ProseArticle>
2  <BackLink href="/blog">Back to blog</BackLink>
3  <BlogPostHeader {...post} />
4  {body}
5</ProseArticle>

Props

Prop	Type	Default	Description
prose	boolean	true	Drop Tailwind Typography's `prose` classes on the inner wrapper. Turn it off when the content already ships its own styles (e.g. YunUI's `MarkdownRenderer`, which would then be styled twice).

Prop	Type	Default	Description
children*	ReactNode	—	Link text — localize it yourself.
className	string	—
href*	string	—	Destination.