Typography

Overview

The Typography system provides consistent text styling for documents, articles, and MDX content. It includes individual text components and an MDX components map that can be passed directly to your MDX renderer.

MDX Components

The mdxComponents object maps HTML tags to styled React components. Pass it to your MDX renderer for automatic styling.

import { mdxComponents } from "@/registry/components/typography"
import { Content } from "astro:content"

<Content components={mdxComponents} />

Supported elements: h1–h6, p, a, blockquote, ul, ol, li, pre, code, em, strong, hr, br, img, del, table, thead, tbody, tr, th, td.

Individual Components

Each typography element is exported as a named component for use outside MDX:

import { H1, H2, P, A, Blockquote } from "@/registry/components/typography"

function MyPage() {
  return (
    <>
      <H1>Page Title</H1>
      <P>Body text with a <A href="/docs">link</A>.</P>
      <Blockquote>A meaningful quote.</Blockquote>
    </>
  )
}

Code Block Integration

Fenced code blocks in MDX are automatically rendered with the CodeBlock component, providing syntax highlighting with a Mac terminal style.

```tsx
const greeting = "Hello, world!"
console.log(greeting)
```

The integration detects the language-xxx class on <code> elements and delegates rendering to CodeBlock with the appropriate language.

Available Components