{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "command",
"type": "registry:ui",
"title": "Command",
"description": "⌘K command palette with fuzzy search, groups, and keyboard navigation (cmdk).",
"dependencies": [
"@saasflare/ui",
"cmdk"
],
"files": [
{
"path": "components/ui/command.tsx",
"type": "registry:ui",
"content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Command primitive — searchable command palette with keyboard navigation and grouping.\n * Built on cmdk. Includes a dialog variant for modal command menus.\n * Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/command\n * @layer core\n *\n * @component\n * @example\n * import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from '@saasflare/ui';\n * \n * \n * \n * \n * New File\n * \n * \n * \n */\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { MagnifyingGlassIcon } from \"@saasflare/ui\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@saasflare/ui\"\n\n/**\n * Props for {@link Command}.\n *\n * Extends the cmdk root props with {@link SaasflareComponentProps} so the\n * design-system axes (surface/radius/animated/iconWeight) can be supplied\n * per-instance or inherited from the provider.\n */\ninterface CommandProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Command palette root — a searchable, keyboard-navigable command menu built on cmdk.\n *\n * Filters {@link CommandItem} children as the user types into {@link CommandInput}.\n * Resolves the design-system axes and emits them as data attributes. For a modal\n * ⌘K-style palette use {@link CommandDialog}.\n *\n * @component\n * @layer core\n */\nfunction Command({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: CommandProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n return (\n \n )\n}\n\n/**\n * Command palette inside a modal {@link Dialog} — the classic ⌘K menu.\n *\n * `title` and `description` feed a visually hidden header for screen readers;\n * the design-system axes are forwarded to both the dialog surface and the\n * inner {@link Command}.\n *\n * @component\n * @layer core\n */\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: React.ComponentProps &\n SaasflareComponentProps & {\n title?: string\n description?: string\n className?: string\n }) {\n return (\n \n )\n}\n\n/**\n * Search input that filters the command list as the user types, with a leading\n * magnifying-glass icon that follows the resolved `iconWeight` axis.\n *\n * @component\n * @layer core\n */\nfunction CommandInput({\n className,\n iconWeight,\n ...props\n}: Omit<\n React.ComponentProps,\n keyof Pick\n> &\n Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n \n \n \n )\n}\n\n/**\n * Scrollable container for the command groups and items.\n *\n * @component\n * @layer core\n */\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Empty state shown when the current search matches no items.\n *\n * @component\n * @layer core\n */\nfunction CommandEmpty({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Labeled group of related command items — pass `heading` for the group label.\n *\n * @component\n * @layer core\n */\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Visual divider between command groups.\n *\n * @component\n * @layer core\n */\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Selectable command entry — highlighted on keyboard navigation and pointer hover.\n *\n * @component\n * @layer core\n */\nfunction CommandItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Right-aligned keyboard-shortcut hint inside a {@link CommandItem}.\n *\n * @component\n * @layer core\n */\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n type CommandProps,\n}\n",
"target": "components/ui/command.tsx"
}
],
"$meta": {
"source": "https://ui.saasflare.io/r/command.json"
}
}