Doodle Command Palette

Component

About

A cmd+k style searchable command palette/list with a hand-drawn sketch border, built on cmdk, for quickly filtering and selecting actions or tools.

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

Code

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

Usage.tsx

"use client";

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@/components/ui/command";

export default function CommandDemo() {
  return (
    <div className="w-full max-w-md mx-auto p-6">
      <Command>
        <CommandInput placeholder="Search tools…" />
        <CommandList>
          <CommandEmpty>No results.</CommandEmpty>
          <CommandGroup>
            <CommandItem value="Pen">Pen</CommandItem>
            <CommandItem value="Pencil">Pencil</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  );
}