@notionic

Render Notion pages in React Server Components: code blocks, callouts, tables, toggles, tabs, KaTeX equations and Mermaid diagrams for notionic.

7 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://notionic.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://notionic.dev/r/registry.json

bun bunx shadcn@latest add https://notionic.dev/r/registry.json

fetch registry curl -s https://notionic.dev/r/registry.json

7 total

Notion Code component

A Notion code block as shadcn/ui's Code Block, highlighted on the server, with a copy button.

npx shadcn@latest add https://notionic.dev/r/notion-code.json

Notion Callout component

A Notion callout as shadcn/ui's Alert, with the callout's icon.

npx shadcn@latest add https://notionic.dev/r/notion-callout.json

Notion Table component

A Notion table as shadcn/ui's Table, with header rows and columns.

npx shadcn@latest add https://notionic.dev/r/notion-table.json

Notion Toggle component

A Notion toggle as shadcn/ui's Collapsible.

npx shadcn@latest add https://notionic.dev/r/notion-toggle.json

Notion Tabs component

Notion tabs as shadcn/ui's Tabs, with every panel kept in the HTML.

npx shadcn@latest add https://notionic.dev/r/notion-tabs.json

Notion Equation component

Notion equations, in blocks and inside text, typeset with KaTeX on the server.

npx shadcn@latest add https://notionic.dev/r/notion-equation.json

Notion Mermaid component

Draws Notion mermaid code blocks as diagrams, loading Mermaid only on pages that have one, with the code as fallback.

npx shadcn@latest add https://notionic.dev/r/notion-mermaid.json