Components
Loading preview...
A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/ai-input-with-suggestionsimport { AIInputWithSuggestions } from "@/components/ui/ai-input-with-suggestions";
import { Text, CheckCheck, ArrowDownWideNarrow } from "lucide-react";
const CUSTOM_ACTIONS = [
{
text: "Summarize",
icon: Text,
colors: {
icon: "text-blue-600",
border: "border-blue-500",
bg: "bg-blue-100",
},
},
{
text: "Proofread",
icon: CheckCheck,
colors: {
icon: "text-green-600",
border: "border-green-500",
bg: "bg-green-100",
},
},
{
text: "Condense",
icon: ArrowDownWideNarrow,
colors: {
icon: "text-purple-600",
border: "border-purple-500",
bg: "bg-purple-100",
},
},
];
export function AIInputWithSuggestionsDemo() {
return (
<div className="space-y-8 min-w-[350px]">
<div>
<AIInputWithSuggestions
actions={CUSTOM_ACTIONS}
defaultSelected="Proofread"
placeholder="Enter text to process..."
/>
</div>
</div>
);
}