Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.

In Notion: type /table. Turn on a header row or column from the table's menu.

Renders as: a <table> with its headers, which scrolls sideways when it's wider than the page. See Supported blocks.

import { NotionTable } from "@/components/notion-table"
// shadcn/ui's Table, from the registry.<NotionRenderer blocks={blocks} components={{ table: NotionTable }} />

In Notion: drag a block to the side of another, or type /2 columns.

Renders as: columns side by side at Notion's widths when their container has room, and stacked when it doesn't.

import type { BlockProps } from "notionic"
// Equal columns from the md breakpoint, stacked below it.export function ColumnList({ children }: BlockProps<"column_list">) {  return <div className="flex flex-col gap-6 md:flex-row">{children}</div>}
<NotionRenderer blocks={blocks} components={{ column_list: ColumnList }} />

In Notion: type /tabs.

Renders as: a row of tabs and one panel at a time, without JavaScript. The row scrolls sideways when it doesn't fit.

import { NotionTabs } from "@/components/notion-tabs"
// shadcn/ui's Tabs, from the registry.<NotionRenderer blocks={blocks} components={{ tab: NotionTabs }} />

In Notion: type /synced block, then copy and paste it to other pages.

This paragraph is inside a synced block. Edit it on any page and every copy changes.

Renders as: its content, with no wrapper, wherever it's placed. There's nothing to customize; style the blocks inside it instead.