Skip to contentnotionic
Docs menu

Examples

Lists

Bulleted, numbered and to-do lists, with nesting.

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

Bulleted list

In Notion: start a line with - or *. Press Tab to nest.

  • A bullet
  • A bullet with bold text
    • A nested bullet
      • Nested again

Renders as: a <ul>, with discs, then circles and squares as it nests. Consecutive items share one list. See Supported blocks.

TypeScript
import { RichText, type BlockProps } from "notionic"
// The list itself is notionic's; you replace each item.export function BulletedListItem({ block, context, children }: BlockProps<"bulleted_list_item">) {  return (    <li className="marker:text-primary">      <RichText text={block.bulleted_list_item.rich_text} context={context} />      {children}    </li>  )}
<NotionRenderer blocks={blocks} components={{ bulleted_list_item: BulletedListItem }} />
Customize · bulleted-list-item.tsx

Numbered list

In Notion: start a line with 1.. Change the format to letters or roman numerals from the list's ⋮⋮ menu.

  1. First step
  2. Second step
    1. A nested step
    2. Another nested step
  3. Third step

Renders as: an <ol> that keeps Notion's start number and format, nesting 1., a., i. as Notion does.

TypeScript
import { RichText, type BlockProps } from "notionic"
export function NumberedListItem({ block, context, children }: BlockProps<"numbered_list_item">) {  return (    <li className="ps-1 marker:font-semibold marker:tabular-nums">      <RichText text={block.numbered_list_item.rich_text} context={context} />      {children}    </li>  )}
<NotionRenderer blocks={blocks} components={{ numbered_list_item: NumberedListItem }} />
Customize · numbered-list-item.tsx

To-do list

In Notion: type [] or /to-do.

Renders as: a list of disabled checkboxes, since a published page can't save a click.

TypeScript
import { RichText, type BlockProps } from "notionic"
export function ToDo({ block, context, children }: BlockProps<"to_do">) {  const { checked, rich_text } = block.to_do  return (    <li className="flex flex-col gap-1">      <span className="flex items-center gap-2">        <span          aria-hidden="true"          className={checked ? "size-4 rounded bg-primary" : "size-4 rounded border border-border"}        />        <span className={checked ? "text-muted-foreground line-through" : undefined}>          <span className="sr-only">{checked ? "Done: " : "To do: "}</span>          <RichText text={rich_text} context={context} />        </span>      </span>      {children ? <div className="ps-6">{children}</div> : null}    </li>  )}
<NotionRenderer blocks={blocks} components={{ to_do: ToDo }} />
Customize · to-do.tsx