Sketch Textarea

Forms 21

About

A multi-line text field with a hand-drawn, rough.js sketch border that redraws itself when focused, used for notes, comments and freeform messages.

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

Code

How Sketch 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 TextareaDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-10 text-foreground">
      <div className="w-full max-w-sm">
        <Textarea
          label="Note"
          placeholder="Scratch something down"
          roughness={1.5}
          rows={5}
        />
      </div>
    </div>
  );
}