ShadCN Style cmdk

This is React component library based on cmdk and ShadCN.

ShadCN Command components are used. With some extra features, such as action panel.

Docs: https://huakunshen.github.io/shadcn-cmdk/

Components

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandListCommandFooter,
  VertifcalSeparator,
  ActionPanel,
  Popover,
  PopoverContent,
  PopoverTrigger,
  ThemeProvider,
  ModeToggle
} from "shadcn-cmdk"

function App() {
  return (
    <>
      <Command>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>
              <TwitterLogoIcon className="mr-2 h-4 w-4" />
              <span>Twitter</span>
            </CommandItem>
          </CommandGroup>
        </CommandList>
        <CommandFooter>
          <GearIcon className="w-4 h-4 ml-2" />
          <ActionPanel
            listRef={listRef}
            selectedValue={value}
            inputRef={inputRef}
            actionItems={[
              { label: "Open Application", value: "open" },
              { label: "Show in Finder", value: "finder" },
              { label: "Show Info in Finder", value: "info" },
              { label: "Add to Favorites", value: "favorites" }
            ]}
          ></ActionPanel>
        </CommandFooter>
      </Command>
    </>
  )
}
//   type ActionItemProps

Demo

A demo component is provided in ./src/components/cmd/demo.tsx.

import { ThemeProvider } from "@/components/theme-provider"
import { CommandDemo } from "@/components/cmd/demo"
import { ModeToggle } from "@/components/theme-toggle"

function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <div className="w-full flex-col h-screen flex justify-center items-center space-y-5">
        <ModeToggle />
        <div className="w-[35em] h-[25em]">
          <CommandDemo />
        </div>
      </div>
    </ThemeProvider>
  )
}

export default App