Apple · Command Palette

React Command Palette: Apple-style

Part of Better Design's React component library. The premium, soft, SF-Pro command palette for consumer apps: built on cmdk + Radix Dialog, ships as a shadcn-compatible registry item.

Install

npx shadcn@latest add https://better-design.com/registry/apple/command.json

Lands in components/ui/command.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Apple showcase

Why this command palette

•cmdk under the hood: fuzzy filter, keyboard nav, group headings
•SF Pro typography, soft #f5f5f7 surface, pill-rounded controls: Apple visual signature
•Radix Dialog: focus trap, escape-to-close, scroll lock baked in
•Drops into any shadcn/ui project unchanged: `npx shadcn@latest add`

Usage

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

export function SpotlightMenu({ open, onOpenChange }) {
  return (
    <CommandDialog open={open} onOpenChange={onOpenChange}>
      <CommandInput placeholder="Search..." />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>New note</CommandItem>
          <CommandItem>Open settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

FAQ

Best use case?

Premium consumer apps, content tools, any product where the chrome should feel soft and inviting rather than dev-tool dense.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item.

How is this different from Apple's Spotlight?

Inspired-by, not lifted. Better Design ships the web-equivalent visual signature on cmdk + Radix Dialog. Apple's Spotlight is a native macOS feature with system-level data integrations that don't exist in browsers.

Related component pages

React Command Palette (all variants)

/components/command-palette

Linear-style Command Palette

/components/linear-command

Apple-style Sheet

/components/apple-sheet