Input

Cards 71

About

Prompt Input A comprehensive and visually polished chat input component. It features a dismissible credit banner, an action toolbar, and smooth animations for a premium user experience. The component is built with cva for variant support and framer-motion for animations.

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

Code

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

Usage.tsx

"use client";

import React, { useState } from "react";
import { PromptInput } from "@/components/ui/input"; // Adjust this import path

export default function PromptInputDemo() {
  const [value, setValue] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  // --- Handler for form submission ---
  const handleSubmit = () => {
    if (!value) return;
    console.log("Submitted value:", value);
    setIsLoading(true);

    // Simulate an API call
    setTimeout(() => {
      setIsLoading(false);
      // You could clear the input here if desired:
      // setValue("");
    }, 2000);
  };

  // --- Handler for the upgrade action ---
  const handleUpgrade = () => {
    alert("This would redirect to the upgrade page!");
  };

  return (
    <div className="w-full p-4 flex flex-col gap-8 items-center">
      {/* Default Variant Showcase */}
      <div>
        <h2 className="text-lg font-semibold mb-2 text-center text-foreground">Default Variant</h2>
        <PromptInput
          credits={490}
          onUpgrade={handleUpgrade}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onSubmit={handleSubmit}
          isLoading={isLoading}
          placeholder="What do wanna do today?"
        />
      </div>

      {/* Magic Variant Showcase */}
      <div>
        <h2 className="text-lg font-semibold mb-2 text-center text-foreground">Magic Variant</h2>
        <PromptInput
          variant="magic"
          credits={120}
          onUpgrade={handleUpgrade}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onSubmit={handleSubmit}
          isLoading={isLoading}
          placeholder="Generate a magical story..."
        />
      </div>
    </div>
  );
}