---
title: "Integrate the TextareaAutosize UI component"
description: "Integrate an auto-resizing textarea component that grows and shrinks based on content. Built on react-textarea-autosize with SSR support. Learn more in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/textarea-autosize"
---

# Integrate the TextareaAutosize UI component

Integrate an auto-resizing textarea component that grows and shrinks based on content. Built on react-textarea-autosize with SSR support. Learn more in the docs.

An auto-resizing textarea component built on `react-textarea-autosize` that automatically adjusts its height based on content, with built-in server-side rendering compatibility and smooth transitions.

> **Interactive demo:** [textarea autosize](https://template.tiptap.dev/preview/tiptap-ui-primitive/textarea-autosize)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add textarea-autosize
```

## Usage

```tsx
import { TextareaAutosize } from '@/components/tiptap-ui-primitive/textarea-autosize'

export default function MyComponent() {
  const [value, setValue] = React.useState('')

  return (
    <div>
      {/* Basic auto-resizing textarea */}
      <TextareaAutosize
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Start typing... I'll grow with your content!"
      />

      {/* Textarea with min and max rows */}
      <TextareaAutosize minRows={3} maxRows={8} placeholder="I have min 3 rows and max 8 rows" />

      {/* Textarea with custom resize behavior */}
      <TextareaAutosize
        minRows={2}
        maxRows={10}
        cacheMeasurements={true}
        placeholder="I cache measurements for better performance"
      />
    </div>
  )
}
```

## Props

### TextareaAutosize

Built on top of `react-textarea-autosize` with additional SSR compatibility.

| Name     | Type                           | Default  | Description            |
| -------- | ------------------------------ | -------- | ---------------------- |
| minRows  | `number`                       | 1        | Minimum number of rows |
| maxRows  | `number`                       | Infinity | Maximum number of rows |
| value    | `string`                       | -        | Controlled value       |
| onChange | `(event: ChangeEvent) => void` | -        | Change event handler   |

## Dependencies

- **react-textarea-autosize**: The underlying library that provides auto-resize functionality
- **use-isomorphic-layout-effect**: Custom hook for SSR-compatible layout effects