Command Menu

Search documentation, components, and switch theme.

Atoms

Command

A command palette for quick actions and search.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/command

Install the following dependencies:

npm install cmdk lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command'
<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Ledgers</CommandItem>
      <CommandItem>Payments</CommandItem>
      <CommandItem>Wallets</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples#

Dialog#