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