# 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](https://notionic.dev/docs/supported-blocks).

```typescript
// Customize · bulleted-list-item.tsx
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 }} />
```

# 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
// Customize · numbered-list-item.tsx
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 }} />
```

# To-do list

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

- [x] A done task
- [ ] An open task
   - [ ] A nested task

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

```typescript
// Customize · to-do.tsx
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 }} />
```