Command

Fast, composable, unstyled command menu for React.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/command

Lineage

Spoke

Anatomy

import {
	Command,
	CommandInput,
	CommandList,
	CommandEmpty,
	CommandGroup,
	CommandItem,
	CommandSeparator,
	CommandShortcut,
} from "@/components/ui/command"

export default () => (
	<Command>
		<CommandInput />
		<CommandList>
			<CommandEmpty />
			<CommandGroup>
				<CommandItem />
			</CommandGroup>
			<CommandSeparator />
		</CommandList>
	</Command>
)

Spoke utility classes

Class	Fallback chain	Description
`--command-radius`	`var(--radius-md)`	Border radius for command
`--command`	`var(--popover)`	Colour for command
`--command-foreground`	`var(--popover-foreground)`	Text/icon colour for command
`--command-border`	`var(--border)`	Border colour for command
`--command-separator`	`var(--border)`	Colour for separator command variant
`--command-item-selected`	`var(--accent)`	Colour for item selected command variant
`--command-item-selected-foreground`	`var(--accent-foreground)`	Text/icon colour for item selected command variant