Docs menu
Examples
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.
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.
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 }} />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.
import { NotionInlineEquation } from "@/components/notion-equation"
// Render inline math with KaTeX, from the registry.<NotionRenderer blocks={blocks} components={{ inline_equation: NotionInlineEquation }} />In Notion: select text and paste a URL, or press Cmd+K.
A link to the Notion API (opens in a new tab), which opens in a new tab, and a link to Introduction, another page of these docs.
the Notion APIRenders as: an <a>. Links to other sites open in a new tab; links to Notion pages go through pageHref.
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 }} />In Notion: type @ and pick a page, a person or a date.
This doc was planned for , and it sits next to Installation.
Renders as: a date as <time>, and a page mention as a link, through pageHref.
// 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} />