notionic
Rendering sample blocks.
notionic renders blocks from the official Notion API (opens in a new tab) as React Server Components, with bold, italic, inline code, red text and highlights.
- Fetch a page's blocks with fetchBlocks.
- Pass them to <NotionRenderer>.
- Nested lists work too.
Code, callouts, tables and toggles here come from notionic's shadcn registry.
TypeScript
const blocks = await fetchBlocks(notion, pageId)
return <NotionRenderer blocks={blocks} />app/page.tsx
Use Notion as your CMS.
Stays in the HTML while closed, so search engines see it.
| Notion block | shadcn/ui component |
|---|---|
| code | Code Block |
| callout | Alert |
| table | Table |
| toggle | Collapsible |
Left column
Right column
That's it.