Textarea

Forms

About

A multi-line text input with semantic color states, filled/outlined/ghost variants, size and resize controls, ported to React from the RockSolid (SolidJS) component library by Darshan Rajadhyaksha.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Textarea to your project and fits it to your theme.

Code

How Textarea is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function TextareaSizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Textarea
        size="small"
        placeholder="Short message"
        aria-label="Small textarea"
      />
      <Textarea
        size="medium"
        placeholder="Describe your request..."
        aria-label="Medium textarea"
      />
      <Textarea
        size="large"
        placeholder="Tell us more about your project..."
        aria-label="Large textarea"
      />
    </div>
  );
}