---
title: "List Node"
description: "Add a list node UI component into your Tiptap Editor. Learn more about it in our docs."
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/list-node"
---

# List Node

Add a list node UI component into your Tiptap Editor. Learn more about it in our docs.

Styling for various list types in the Tiptap editor, including ordered lists, unordered lists, and task lists.

> **Interactive demo:** [list node](https://template.tiptap.dev/preview/tiptap-node/list-node)

## Installation

You can add the node component via Tiptap CLI

```bash
npx @tiptap/cli@latest add list-node
```

## Usage

The ListNode provides styling for different types of lists within the editor. To use it, include it in your project and ensure you're using the list extensions from Tiptap.

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { TaskList } from '@tiptap/extension-task-list'
import { TaskItem } from '@tiptap/extension-task-item'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/list-node/list-node.scss'

export default function EditorWithLists() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      TaskList,
      TaskItem.configure({
        nested: true,
      }),
    ],
    content: `
      <ul>
        <li>Unordered list item</li>
        <li>Another unordered item</li>
      </ul>

      <ol>
        <li>Ordered list item</li>
        <li>Another ordered item</li>
      </ol>

      <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">Completed task</li>
        <li data-type="taskItem" data-checked="false">Pending task</li>
      </ul>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## Features

- Consistent styling for ordered lists, unordered lists, and task lists
- Proper nesting with appropriate indentation
- Custom checkbox styling for task lists
- Interactive checkboxes that respond to clicks
- Visual strikethrough for completed tasks
- Dark mode support

## Requirements

Open source feature(s)

- [`@tiptap/extension-bullet-list`](https://tiptap.dev/docs/editor/extensions/nodes/bullet-list.md)
- [`@tiptap/extension-ordered-list`](https://tiptap.dev/docs/editor/extensions/nodes/ordered-list.md)
- [`@tiptap/extension-list-item`](https://tiptap.dev/docs/editor/extensions/nodes/list-item.md)
- [`@tiptap/extension-task-list`](https://tiptap.dev/docs/editor/extensions/nodes/task-list.md)
- [`@tiptap/extension-task-item`](https://tiptap.dev/docs/editor/extensions/nodes/task-item.md)