Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/input"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>
);
}