Command Prompt

Component 1

About

This component provides an input field for user queries, enhanced with animated suggestion cards that appear on load. It is designed to be a central interaction point for an application, such as a chatbot or a command palette.

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

Code

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

Usage.tsx

import {
  Image as ImageIcon,
  FileText,
  Calendar,
  Mic,
  StickyNote,
} from "lucide-react";
import { CommandPrompt } from "@/components/ui/command-prompt";

export default function CommandPromptDemo() {
  // Define the suggestions with specific classes for pixel-perfect styling
  const suggestions = [
    {
      icon: <ImageIcon className="h-5 w-5" />,
      label: "Create image",
      className: "bg-orange-200 text-orange-800 dark:bg-orange-800/40 dark:text-orange-200 hover:bg-orange-300 dark:hover:bg-orange-800/70",
    },
    {
      icon: <StickyNote className="h-5 w-5" />,
      label: "Add note",
      className: "bg-yellow-200 text-yellow-800 dark:bg-yellow-800/40 dark:text-yellow-200 hover:bg-yellow-300 dark:hover:bg-yellow-800/70",
    },
    {
      icon: <Calendar className="h-5 w-5" />,
      label: "Create event",
      className: "bg-red-200 text-red-800 dark:bg-red-800/40 dark:text-red-200 hover:bg-red-300 dark:hover:bg-red-800/70",
    },
    {
      icon: <Mic className="h-5 w-5" />,
      label: "Voice mode",
      className: "bg-gray-200 text-gray-800 dark:bg-gray-700/60 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700",
    },
    {
      icon: <FileText className="h-5 w-5" />,
      label: "Analyse docs",
      className: "bg-blue-300 text-blue-800 dark:bg-blue-800/40 dark:text-blue-200 hover:bg-blue-400 dark:hover:bg-blue-800/70",
    },
  ];

  return (
    <div className="flex items-center justify-center w-full h-screen bg-gray-50 dark:bg-gray-950">
      <CommandPrompt
        title="Hello! How can I assist you today?"
        placeholder="Anything..."
        suggestions={suggestions}
      />
    </div>
  );
}