---
title: React Wrap Balancer
description: A simple React component that makes titles more readable
---

### Installation

To install `react-wrap-balancer`, simply run the following command:

```sh Terminal
pnpm add react-wrap-balancer
```

### Usage

Here is an example of how to use `react-wrap-balancer` to make titles more readable:

```tsx my-component.tsx
import { Balancer } from 'react-wrap-balancer';

function MyComponent() {
  return (
    <div>
      <Balancer>This is a title that is too long to fit in one line.</Balancer>
    </div>
  );
}
```

### Benefits

- <Icon icon="check" iconType="solid" /> **Improved Readability**: `react-wrap-balancer` makes titles more readable by automatically wrapping them at the appropriate breakpoints.
- <Icon icon="check" iconType="solid" /> **Easy Integration**: `react-wrap-balancer` is easy to integrate into your existing React application, providing a seamless installation experience.

For more information and detailed documentation, visit the [react-wrap-balancer website](https://react-wrap-balancer.vercel.app/).
