Next.js Textarea for the App Router

Drivn installs through a small CLI that writes the component source directly into your repository — there is no runtime npm package to version-lock. From the root of your Next.js 16 project run npx drivn add textarea. The Textarea has no component dependencies and no icon imports, so the CLI writes a single textarea.tsx file and nothing else. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file; future Drivn releases will not overwrite it. Commit the change for a clean baseline before you start wiring it into forms, and confirm the file landed under your UI directory in the editor.

Unlike a dialog or a drawer, the Textarea holds no state and runs no effect, so its source has no 'use client' directive. That means you can import and render it inside a server component with zero client JavaScript shipped for the field itself. The component is a React.forwardRef around a native <textarea> that spreads every standard HTML textarea attribute through {...props} — name, placeholder, rows, required, defaultValue, and maxLength all pass straight to the DOM element. Set rows to size the initial height, and because the base class includes resize-y the reader can drag the field taller without any code from you. An uncontrolled textarea inside a <form> needs no hooks at all. See the installation guide for project setup.

Because the Textarea renders on the server and forwards every native attribute, it drops straight into the App Router's Server Action form pattern with no client boundary. Give the field a name, attach a server function to the form's action, and read the value off FormData on the server — no onChange, no useState, no client component. This is the fastest possible long-text form in Next.js: the browser posts the form natively, the action runs on the server, and the field never needed to hydrate. Add required or maxLength to lean on native browser validation before the request is even sent. For live character counts or per-keystroke validation, the next section switches the same Textarea into a controlled field.

When the field drives live UI — a comment box counting characters, a form with per-keystroke validation, or a react-hook-form integration — move it into a client component and control it with value and onChange. The Textarea passes both through {...props} to the native element, so it behaves exactly like a raw <textarea> you already know: onChange fires with a DOM event, so read the text off e.target.value. For form libraries the forwardRef matters — register('message') from react-hook-form spreads a ref and change handlers onto the field, and because the Textarea forwards its ref to the underlying element, the library reads and focuses it directly with no Controller wrapper for the common case. Mark the component 'use client' and keep it small so only the interactive part hydrates.

Every class the Textarea renders lives in a single styles.base string at the top of the file you own after install — there are no size or variant maps to learn. It sets the box (w-full min-h-[80px] px-4 py-3, border border-input rounded-[10px]), the text and placeholder colors, a focus:outline-none with a focus-visible:ring-[3px] ring, resize-y so the field grows vertically only, and the disabled treatment. Edit that one object and every textarea in your app updates at once, and because the colors read from your Tailwind tokens (border-input, text-foreground, ring-ring), changing them in theming re-themes the field for dark and light mode automatically. The className prop merges through cn() for per-instance overrides — pass className="min-h-[160px]" to make one field taller without touching the base. The styles object below is copied verbatim from textarea.ts.