---
title: "TextStyleKit extension"
description: "All necessary text style extensions in one extension with TextStyleKit. Perfect for quickly registering the most common text styles with Tiptap. More in the docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/text-style-kit"
---

# TextStyleKit extension

All necessary text style extensions in one extension with TextStyleKit. Perfect for quickly registering the most common text styles with Tiptap. More in the docs!

The `TextStyleKit` is a collection of the most common Tiptap text style extensions. If you quickly want to setup styles for your text in Tiptap, this extension is for you.

> **Interactive demo:** [Textstyle](https://embed.tiptap.dev/preview/Marks/Textstyle)

## Install

```bash
npm install @tiptap/extension-text-style
```

## Included extensions

### Marks

- [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md)

### Functionality

- [`BackgroundColor`](https://tiptap.dev/docs/editor/extensions/functionality/background-color.md)
- [`Color`](https://tiptap.dev/docs/editor/extensions/functionality/color.md)
- [`FontFamily`](https://tiptap.dev/docs/editor/extensions/functionality/fontfamily.md)
- [`FontSize`](https://tiptap.dev/docs/editor/extensions/functionality/fontsize.md)
- [`LineHeight`](https://tiptap.dev/docs/editor/extensions/functionality/line-height.md)

## Source code

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

## Using the TextStyleKit extension

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

```js
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

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

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

```js
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

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

      // Configure an extension
      fontSize: {
        types: ['heading', 'paragraph'],
      },
    }),
  ],
})
```