Haedong
044

Typography

Display

Two voices

The shell is mono and uppercase; the writing is not. Links underline with the hairline.

Headings

h2 and h3 go back to the shell voice, so a section reads like a label.

Quotes sit behind one hairline.

Customize

Sample

Code

<Prose as="article" className="font-pretendard">
  <h1>Two voices</h1>
  <p>The shell is mono and uppercase; the writing is not. <a href="#">Links</a> underline with the hairline.</p>
  <h2>Headings</h2>
  <p>h2 and h3 go back to the shell voice, so a section reads like a label.</p>
  <blockquote>Quotes sit behind one hairline.</blockquote>
</Prose>

Install

npx shadcn@latest add https://components.haedong.dev/r/typography.json

Props

Exports LABEL, PROSE and CODE (class strings) and Prose (extends the native div props). Prose shapes the elements inside: h1 in the writing voice, h2/h3 back to the shell voice, ASCII-dash bullets, mono numbers, hairline quotes and code. It sets no font family — pass your body face in className (this site passes font-pretendard). This site's /work and /mcp prose runs on PROSE.

PropTypeDescription
as"div" | "article" | "section" | "p"Element to render. Defaults to "div".
classNamestringBody face and width: font-pretendard max-w-prose.