Shadcn Command Menu

Overview

The Shadcn Command Menu is a searchable command palette that helps users quickly navigate your documentation built with Fumadocs.

This version is adapted from the original shadcn/ui Command Menu, with a few enhancements and tighter integration with Revola for responsive behavior and improved reliability.

Installation

npx shadcn@latest add https://revola.sameerjs.com/r/shadcn-command-menu.json

Usage

Basic Implementation

Import the component and supporting utilities from your local files:

import ShadcnCommandMenu from "@/components/shadcn-command-menu";
import { getColors } from "@/lib/colors";
import { source } from "@/lib/source";

Since pageTree is a server-side value, retrieve it and pass it (along with the color palette) to the component in a client-safe wrapper.

components/command-menu-wrapper.tsx

import ShadcnCommandMenu from "@/components/ui/shadcn-command-menu";
import { getColors } from "@/lib/colors";
import { source } from "@/lib/source";
 
export default function CommandMenuWrapper() {
  const colors = getColors();
  const pageTree = source.pageTree;
 
  return (
    <div className="space-x-4 space-y-4">
      <ShadcnCommandMenu tree={pageTree} colors={colors} />
    </div>
  );
}

Add to Your Layout

Include the command menu in your layout or navigation:

components/navigation.tsx

import CommandMenuWrapper from "@/components/command-menu-wrapper";
 
export function Navigation() {
  return (
    <nav className="flex items-center gap-4">
      <CommandMenuWrapper />
      {/* Other navigation items */}
    </nav>
  );
}

You're all set! Enjoy the enhanced command menu experience.

Note

There’s a known issue: if a valid search result is found, everything works correctly (including showing the secondary action).

However, if you change the search query to something that doesn't match any item, the secondary action still appears, even though it shouldn't.