Glass Textarea

Forms

About

A multi-line glassmorphic text input that grows with its content, with an optional character counter and a footer slot for actions.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";

import { GlassTextarea } from "@/components/ui/glass-textarea";

export default function GlassTextareaDemo() {
  const [value, setValue] = React.useState("");

  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <GlassTextarea
        placeholder="Write a message…"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        showCount
        maxLength={240}
        className="w-full max-w-sm"
      />
    </div>
  );
}