# Text

> Paragraphs and rich text: formatting, colors, links, math, mentions and dates.

Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.

# Paragraph

**In Notion:** just type. Shift+Enter breaks a line inside the same paragraph.

A paragraph of text, the way most of a page is written.  
This second line is a line break inside it.

**Renders as:** a `<p>`, with line breaks as `<br>`. See [Supported blocks](https://notionic.dev/docs/supported-blocks).

```typescript
// Customize · paragraph.tsx
import { RichText, type BlockProps } from "notionic"

export function Paragraph({ block, context, children }: BlockProps<"paragraph">) {
  return (
    <div className="max-w-prose">
      <p className="leading-7">
        <RichText text={block.paragraph.rich_text} context={context} />
      </p>
      {children}
    </div>
  )
}

<NotionRenderer blocks={blocks} components={{ paragraph: Paragraph }} />
```

# Formatting and colors

**In Notion:** select text and use the formatting menu, or `Cmd+B`, `Cmd+I`, `Cmd+U`, `Cmd+Shift+S` and `Cmd+E`.

**Bold**, *italic*, underline, ~~strikethrough~~, `inline code`, blue text, a yellow highlight and inline math, $E = mc^2$.

**Renders as:** `<strong>`, `<em>`, `<u>`, `<s>` and `<code>`, with Notion's colors as CSS variables you can restyle. Inline math shows its source unless you add an equation component.

```typescript
// Customize · rich-text.tsx
import { NotionInlineEquation } from "@/components/notion-equation"

// Render inline math with KaTeX, from the registry.
<NotionRenderer blocks={blocks} components={{ inline_equation: NotionInlineEquation }} />
```

# Links

**In Notion:** select text and paste a URL, or press `Cmd+K`.

A link to [the Notion API](https://developers.notion.com/), which opens in a new tab, and a link to [Introduction](https://notionic.dev/docs/introduction), another page of these docs.

**Renders as:** an `<a>`. Links to other sites open in a new tab; links to Notion pages go through `pageHref`.

```typescript
// Customize · link.tsx
import Link from "next/link"
import { NotionLink, type LinkProps } from "notionic"

export function AppLink({ link, children, favicon }: LinkProps) {
  if (link.external) return <NotionLink link={link} favicon={favicon}>{children}</NotionLink>
  return (
    <Link href={link.href} className="font-medium underline underline-offset-4">
      {children}
    </Link>
  )
}

<NotionRenderer blocks={blocks} components={{ link: AppLink }} />
```

# Mentions and dates

**In Notion:** type `@` and pick a page, a person or a date.

This doc was planned for 2026-11-04, and it sits next to [Installation](https://notionic.dev/docs/installation).

**Renders as:** a date as `<time>`, and a page mention as a link, through `pageHref`.

```typescript
// Customize · page-href.tsx
// Point page mentions and links at your own routes.
const routes = new Map([["3fcb17268ab381df8e41dc782036832e", "/docs/installation"]])

<NotionRenderer blocks={blocks} pageHref={(pageId) => routes.get(pageId) ?? null} />
```