---
title: "ListKit extension"
description: "All necessary list extensions in one extension with ListKit. Perfect for quickly setting up lists with Tiptap. More in the docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/list-kit"
---

# ListKit extension

All necessary list extensions in one extension with ListKit. Perfect for quickly setting up lists with Tiptap. More in the docs!

The `ListKit` is a collection of all necessary Tiptap list extensions. If you quickly want to setup lists in Tiptap, this extension is for you.

## Install

```bash
npm install @tiptap/extension-list
```

## Included extensions

### Nodes

- [`BulletList`](https://tiptap.dev/docs/editor/extensions/nodes/bullet-list.md)
- [`ListItem`](https://tiptap.dev/docs/editor/extensions/nodes/list-item.md)
- [`OrderedList`](https://tiptap.dev/docs/editor/extensions/nodes/ordered-list.md)
- [`TaskItem`](https://tiptap.dev/docs/editor/extensions/nodes/task-item.md)
- [`TaskList`](https://tiptap.dev/docs/editor/extensions/nodes/task-list.md)

### Extensions

- [`ListKeymap`](https://tiptap.dev/docs/editor/extensions/functionality/listkeymap.md)

## Source code

[packages/extension-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/)

## Using the ListKit extension

Pass `ListKit` to the editor to load all included extension at once.

```js
import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list'

const editor = new Editor({
  extensions: [ListKit],
})
```

You can configure the included extensions, or even disable a few of them, like shown below.

```js
import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list'

const editor = new Editor({
  extensions: [
    ListKit.configure({
      // Disable an extension
      bulletList: false,

      // Configure an extension
      listItem: {
        HTMLAttributes: { class: 'list-item' },
      },
    }),
  ],
})
```