Skip to contentnotionic
Docs menu

Examples

Callouts, quotes and toggles

Callouts, quotes, toggles and dividers.

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

Callout

In Notion: type /callout. Click the icon to change it, and pick a color from the block's 鈰嫯 menu.

A callout with rich text.

A second paragraph inside it.

A yellow callout.

Renders as: a bordered box with the icon, in Notion's color. See Supported blocks.

TypeScript
import { defaultComponents, type BlockProps } from "notionic"
// Wrap the built-in callout instead of replacing it.const BuiltInCallout = defaultComponents.callout!
export function FramedCallout(props: BlockProps<"callout">) {  return (    <div className="rounded-xl ring-1 ring-border">      <BuiltInCallout {...props} />    </div>  )}
// Or use shadcn/ui's Alert, from the registry: import { NotionCallout } from "@/components/notion-callout"<NotionRenderer blocks={blocks} components={{ callout: FramedCallout }} />
Customize 路 callout.tsx

Quote

In Notion: type " and a space, or /quote.

A single-line quote.

Renders as: a <blockquote> with a border on the start side.

TypeScript
import { RichText, type BlockProps } from "notionic"
export function Quote({ block, context, children }: BlockProps<"quote">) {  return (    <blockquote className="border-s-4 border-primary ps-4 text-lg italic">      <RichText text={block.quote.rich_text} context={context} />      {children}    </blockquote>  )}
<NotionRenderer blocks={blocks} components={{ quote: Quote }} />
Customize 路 quote.tsx

Toggle

In Notion: type > and a space, or /toggle.

A toggle

Content inside the toggle.

  • A list inside it

Renders as: a <details>, which opens without JavaScript and keeps its content in the HTML.

TypeScript
import { NotionToggle } from "@/components/notion-toggle"
// shadcn/ui's Collapsible, from the registry.<NotionRenderer blocks={blocks} components={{ toggle: NotionToggle }} />
Customize 路 toggle.tsx

Divider

In Notion: type ---.

Renders as: an <hr> in the border color.

TypeScript
export function Divider() {  return <hr className="my-8 border-dashed border-border" />}
<NotionRenderer blocks={blocks} components={{ divider: Divider }} />
Customize 路 divider.tsx