---
title: Splitting Text
description: A text component that splits text into multiple parts and animates them.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="splitting-text-demo" />

## Installation

<ComponentInstallation name="splitting-text" />

## Usage

```tsx
<SplittingText type="chars" text="Splitting Text" />
```

## Examples

### Splitting words

<ComponentPreview name="splitting-words-demo" />

### Splitting lines

<ComponentPreview name="splitting-lines-demo" />

### Splitting with custom variants

<ComponentPreview name="splitting-with-custom-variants-demo" />

## Props

<TypeTable
  type={{
    className: {
      description: 'The className of the component',
      type: 'string',
      required: false,
    },
    text: {
      description: 'The text to split',
      type: 'string | string[]',
      required: true,
    },
    type: {
      description: 'The type of text to split',
      type: "'chars' | 'words' | 'lines'",
      required: false,
      default: 'chars',
    },
    motionVariants: {
      description: 'The motion variants of the component',
      type: 'Variants',
      required: false,
    },
    inView: {
      description: 'Whether the component is in view',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inViewMargin: {
      description: 'The margin of the component when it is in view',
      type: 'string',
      required: false,
      default: '0px',
    },
    inViewOnce: {
      description: 'Whether the component should only animate once',
      type: 'boolean',
      required: false,
      default: 'true',
    },
  }}
/>

## Credits

- Credits to [Pace UI](https://www.paceui.com/docs/components/text-reveal) for the inspiration