saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Command

Command

Fast, composable command menu for React. Perfect for search, quick actions, and Cmd+K interfaces.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/command

Usage

import {
  Command,
  CommandDialog,
  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>Calendar</CommandItem>
      <CommandItem>Search</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

Loading...
Command in a dialog.

Command Palette

Loading...
Palette interface.

With Groups

Loading...
Grouped sections with shortcuts.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Command menu content.

On This Page

  • Installation
  • Usage
  • Examples
  • Dialog
  • Command Palette
  • With Groups
  • API Reference
No results found.
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile
Billing
Settings

Command Palette

Search for a command to run...

No results found.
Actions
Create New Project
Search Documents
Navigation
Dashboard
Documents
Team Members
Branches
Settings
No results found.
Suggestions
Calendar⌘C
Messages⌘M
Calculator⌘K
Settings
Profile⌘P
Mail⌘B
Billing⌘S
Settings⌘,