Typography

Prose

Compound component: `Prose` and `Prose.Link`.

Server safe2 exportsSource

Import

import { isSafeHref, Prose } from '@the_viveksingh/vivek-ui'

Style HTML you did not author

Markdown output, a CMS body, a changelog. One wrapper styles headings, lists, tables, blockquotes and code without a class on every element.

Long-form content

Prose styles raw HTML you did not author - markdown output, a CMS body, a changelog - without needing a class on every element.

Headings, lists and blockquotes pick up the type scale
code and links inherit the tokens

Everything here is plain HTML inside one Prose wrapper.

<Prose>
  <h3>Long-form content</h3>
  <p>Prose styles raw HTML without needing a class on every element.</p>
  <ul>
    <li>Headings, lists and blockquotes pick up the type scale</li>
  </ul>
  <blockquote>Everything here is plain HTML inside one Prose wrapper.</blockquote>
</Prose>

Prose.Link refuses an unsafe href

A javascript: or data: URL renders as inert text instead of a link. Untrusted markdown is the exact case where this matters, and React 18 will happily render such an href if you do not check it.

Prose.Link refuses an unsafe href: a javascript: URL renders as inert text rather than a clickable link, so untrusted markdown cannot smuggle script through. A safe link still works.

<Prose.Link href="https://vivekkumarsingh.in/">A safe link works</Prose.Link>

{/* Renders as plain text, not a link */}
<Prose.Link href="javascript:alert(1)">Blocked</Prose.Link>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Prose
Prop	Type	Default	Description
`as`	`ElementType`	—	Root element. Defaults to `div`.
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`measure`	`boolean`	—	Cap the measure at a readable line length. Defaults to `true`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

isSafeHrefProse

Rendering

Server safe

Prose carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.