Command Palette Feature Showcase

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature101.tsx instead.

Usage

The file also exports feature101Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature101, feature101Demo } from "@/components/blocks/feature/feature101";

export default function Page() {
  return <Feature101 {...feature101Demo} />;
}

Props

Types

type CommandPaletteItem = {
  icon: number; // index into a fixed built-in icon set
  title: string;
  description: string;
  shortcut?: string;
};

type CommandPaletteGroup = {
  label: string;
  items: CommandPaletteItem[];
};

Behavior notes

• Real client-side state: the search input is a fully controlled useState<string>, and on every keystroke every group's items are filtered (case-insensitive substring match against title and description); groups with zero matching items are hidden entirely, and a "No features match" message shows when nothing matches at all.
• "use client" component, so its demo props live in the sibling feature101.demo.tsx file per this repo's client/demo-file-split rule, not in feature101.tsx itself.
• Each item's `icon` is a numeric index into a fixed, built-in array of lucide-react icons rather than accepting an icon component as data, consistent with this repo's rule against passing component references as props on a "use client" block.
• The keyboard-shortcut `<kbd>` hints and the "esc" hint next to the search field are decorative styling only; no keyboard shortcut handling or focus-trap is actually wired up.
• Hover states on each row are plain CSS (`hover:bg-muted`); there is no keyboard arrow-key navigation between results.
• The search field uses a real `<Label htmlFor>` (visually hidden via `sr-only`) tied to the input's id for screen reader users.