# Installation

> Install notionic and connect it to Tailwind CSS.

## Install the package

```bash
pnpm add notionic @notionhq/client
```

`@notionhq/client` is only needed to fetch pages. notionic's only runtime dependency is React.

## Add the styles

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`.

## Theme tokens

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 |

## Create a Notion integration

1. Go to [Notion integrations](https://www.notion.so/profile/integrations) and create an **internal** integration. It only needs **Read content**.
2. Copy its secret into your environment as `NOTION_TOKEN`. Keep it on the server.
3. In Notion, open each page you want to render, choose **••• → Connections**, and add the integration. Its child pages inherit access.