Overview

shadcn/ui versions of blocks, installed with the shadcn CLI.

The registry has versions of some blocks built on your own shadcn/ui components. The shadcn CLI copies them into your project, with the shadcn components they use, so you can edit them.

Set up

Add the registry to your components.json:

JSON

{  "registries": {    "@notionic": "https://notionic.dev/r/{name}.json"  }}

Then add items and pass them to components:

Bash

npx shadcn@latest add @notionic/notion-code @notionic/notion-callout

TypeScript

import { NotionCallout } from "@/components/notion-callout"import { NotionCode } from "@/components/notion-code"
<NotionRenderer blocks={blocks} components={{ code: NotionCode, callout: NotionCallout }} />

Items

Item	Built on	Key
`notion-code`	Code Block, highlighted on the server, with a copy button	`code`
`notion-callout`	Alert	`callout`
`notion-table`	Table	`table`
`notion-toggle`	Collapsible	`toggle`
`notion-tabs`	Tabs	`tab`
`notion-equation`	KaTeX, rendered on the server	`equation`, `inline_equation`
`notion-mermaid`	Mermaid diagrams	`code`, through `withMermaid`