FreeInputs

Command Search

Use this for documentation search, component libraries, product dashboards, and quick-action panels.

ReactTailwind CSSMotionInput

Search components...

MVP calculator

Hero section

Pricing card

Overview

A command-palette style search card with animated suggestion rows.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<CommandSearch />

Command Search.tsx

tsx

"use client";

import { motion } from "framer-motion";

const suggestions = ["MVP calculator", "Hero section", "Pricing card"];

export function CommandSearch() {
  return (
    <div className="w-full max-w-md rounded-xl border border-white/10 bg-zinc-950 p-3 text-white shadow-2xl shadow-black/20">
      <div className="rounded-lg border border-white/10 bg-black px-4 py-3 text-sm text-zinc-500">
        Search components...
      </div>
      <div className="mt-3 space-y-2">
        {suggestions.map((item, index) => (
          <motion.div
            key={item}
            initial={{ opacity: 0, y: 8 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.08 }}
            className="rounded-lg px-3 py-2 text-sm hover:bg-white/10"
          >
            {item}
          </motion.div>
        ))}
      </div>
    </div>
  );
}