# React Notion X
> Fast and accurate React renderer for Notion.
[](https://www.npmjs.com/package/react-notion-x) [](https://travis-ci.com/NotionX/react-notion-x) [](https://prettier.io)
## Install
```bash
npm install react-notion-x
```
## Usage
First you'll want to fetch the content for a Notion page:
```ts
import { NotionAPI } from 'notion-client'
const api = new NotionAPI()
// fetch the page's content, including all async blocks, collection queries, and signed urls
const recordMap = await api.getPage('067dd719a912471ea9a3ac10710e7fdf')
```
Once you have the data for a Notion page, you can render it:
```tsx
import React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ExampleNotionPage({ recordMap }) => (
)
```
## Styles
You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in `pages/_app.js`:
```ts
// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'
// used for collection views (optional)
import 'rc-dropdown/assets/index.css'
// used for rendering equations (optional)
import 'katex/dist/katex.min.css'
```
## License
MIT © [Travis Fischer](https://transitivebullsh.it)
Support my OSS work by following me on twitter 