Shadcn Textarea for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/textarea.json

npx shadcn@latest add https://kit.dev/r/aria/textarea.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/textarea.json

yarn shadcn@latest add https://kit.dev/r/aria/textarea.json

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

"use client";

import type React from "react";
import {
  composeRenderProps,
  TextArea as TextareaPrimitive,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export const Textarea = (
  props: React.ComponentProps<typeof TextareaPrimitive>
) => {
  const { className, ...rest } = props;

  return (
    <TextareaPrimitive
      className={composeRenderProps(className, (renderClassName) =>
        cn(

Usage

import { Textarea } from "@/components/ui/textarea";

const TextareaDemo = () => (
  <Textarea className="max-w-xs" placeholder="Type your message here." />
);

Demos

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Button

Pair with Button to create a textarea with a submit button.

Rtl

Right-to-left textarea. See the RTL configuration guide for document direction.

API Reference