# Introduction

> What notionic is, and how its pieces fit together.

notionic renders blocks from the [official Notion API](https://developers.notion.com/) 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.

## The pieces

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

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

## Principles

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

## Next

Start with [Installation](https://notionic.dev/docs/installation), then the [Quick start](https://notionic.dev/docs/quick-start).

> 🚧 notionic is in early development. Its API may change before 1.0.