Introduction

notionic renders blocks from the official Notion API (opens in a new tab) as React Server Components. Use Notion as your CMS for docs, blogs and landing pages without rebuilding the same renderer in every project.

These docs are themselves Notion pages, rendered by notionic.

• NotionRenderer renders an array of Notion blocks. It runs on the server and ships no client JavaScript.
• fetchBlocks and fetchPage, from notionic/fetch, get a page's blocks (and metadata) from the Notion API, with nested blocks attached.
• notionic/styles.css connects notionic to Tailwind CSS and defines Notion's colors.
• The shadcn/ui registry has versions of some blocks built on shadcn/ui components, which the shadcn CLI copies into your project.

graph LR
  A["Notion API"] --> B["fetchPage"]
  B --> C["NotionRenderer"]
  C --> D["HTML"]

• Server-first. Blocks render to HTML on the server. Interactive registry items are small client components.
• Follows your theme. Components use shadcn/ui's tokens (foreground, muted, border…), so they match your app, dark mode included.
• Yours to change. Every block type's component can be replaced.
• Light. React is the only runtime dependency.

Start with Installation, then the Quick start.