Liquid TextArea

Forms 1

About

A multi-line text input with an animated liquid-glass surface, floating label, and hint text, built on Base UI's Field primitives.

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

Code

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

Usage.tsx

"use client";

import LiquidTextArea from "@/components/ui/liquid-textarea";
import { LiquefyProvider } from "@/components/ui/liquid-textarea-utils/provider";

export default function LiquidTextAreaDemo() {
  return (
    <LiquefyProvider
      theme="dark"
      className="flex min-h-screen w-full items-center justify-center bg-[#1a2138] p-10"
    >
      <LiquidTextArea
        label="Message"
        hint="We usually reply within a day."
        placeholder="Tell us what's on your mind..."
        className="w-full max-w-sm"
      />
    </LiquefyProvider>
  );
}