Docs menu
Getting started
Installation
Install notionic and connect it to Tailwind CSS.
Bash
pnpm add notionic @notionhq/client@notionhq/client is only needed to fetch pages. notionic's only runtime dependency is React.
notionic needs Tailwind CSS v4. Import its stylesheet after Tailwind, in your global CSS:
CSS
@import "tailwindcss";@import "notionic/styles.css";This line tells Tailwind to scan notionic's components for classes, and defines Notion's colors as --notionic-* variables, with dark values under .dark.
Components use shadcn/ui's color tokens. If your app uses shadcn/ui, there's nothing to do. Otherwise, define these in your Tailwind theme:
| Token | Used for |
|---|---|
--color-foreground | Text |
--color-muted | Code, callouts, table headers |
--color-muted-foreground | Captions, quotes, secondary text |
--color-border | Borders and dividers |
--color-ring | Focus outlines |
--color-primary | Checked to-dos |
- Go to Notion integrations (opens in a new tab) and create an internal integration. It only needs Read content.
- Copy its secret into your environment as
NOTION_TOKEN. Keep it on the server. - In Notion, open each page you want to render, choose ••• → Connections, and add the integration. Its child pages inherit access.