# Highlight Textarea

> Highlight textarea for React and Tailwind CSS (shadcn/ui) that colors @mentions, #hashtags, URLs and any text beyond the character limit directly inside the textarea as the user types. It is built for comment boxes, post composers, chat inputs and bios where people need to see what will be parsed and what will be cut. A highlight textarea is a transparent textarea layered over a mirrored, token-colored backdrop that stays in sync on input, scroll and resize; this one tokenizes with regular expressions, accepts custom token patterns and class names, pops each new token with the Web Animations API, marks overflow past maxLength with a destructive wavy underline without blocking input, auto-grows between minRows and maxRows, exposes onTokensChange and a customizable counter, keeps native selection, IME and undo behavior, sets aria-invalid when over the limit, and respects reduced motion. Use it in social composers, support replies, release notes and profile editors. The included demo types a sample post and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Textarea, Input, Form, shadcn/ui
- Live preview: https://21st.dev/@dhxwhy/components/highlight-textarea

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/highlight-textarea?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/textarea.md