---
name: "@notionic"
slug: "notionic"
description: "Render Notion pages in React Server Components: code blocks, callouts, tables, toggles, tabs, KaTeX equations and Mermaid diagrams for notionic."
category: "Blocks & sections (marketing/SaaS)"
tags: ["blocks", "buttons", "developer-tools", "navigation", "tables"]
framework: "react"
license: "MIT"
author: "nublson"
website: "https://notionic.dev"
github: "https://github.com/nublson/notionic"
registry: "https://notionic.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 7
generated_at: "2026-10-20T06:35:22.791Z"
---

# @notionic

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

## Links

- Website: https://notionic.dev
- GitHub: https://github.com/nublson/notionic
- Registry JSON: https://notionic.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/notionic
- This file: https://sh4dcn.vercel.app/md/notionic.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://notionic.dev/r/registry.json
pnpm dlx shadcn@latest add https://notionic.dev/r/registry.json
bunx shadcn@latest add https://notionic.dev/r/registry.json
# clone the source repo
git clone https://github.com/nublson/notionic.git
# fetch the raw registry index
curl -s https://notionic.dev/r/registry.json
```

## Components (7)

| name | type | description | install |
| --- | --- | --- | --- |
| notion-code | registry: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 | registry: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 | registry: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 | registry:component | A Notion toggle as shadcn/ui's Collapsible. | `npx shadcn@latest add https://notionic.dev/r/notion-toggle.json` |
| notion-tabs | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @notionic to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/notionic.md) for the component list.
2. Fetch the machine-readable index: https://notionic.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: notionic).
```