Tile UI React
Source code

Components

Command

Command palette primitives.

Use Command to build searchable command menus and palettes.

No results found.
Suggestions
Calendar
Search
Settings
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@tile-ui/react';

export default function CommandDemo() {
	return (
		<Command>
			<CommandInput placeholder="Type a command..." aria-label="Search commands" />

Registry install

pnpm dlx shadcn@latest add @tile-ui/command

Package usage

import { Command, CommandInput, CommandList, CommandGroup, CommandItem } from '@tile-ui/react';
 
<Command>
	<CommandInput placeholder="Search" />
	<CommandList>
		<CommandGroup>
			<CommandItem>Item one</CommandItem>
		</CommandGroup>
	</CommandList>
</Command>

Highlights

  • Input, list, group, and item
  • Custom filter
  • Loop navigation

Registry dependencies

ItemPurpose
commandComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Command

PropTypeDefault
itemsCommandItemDef[]—
groupsCommandGroupDef[]—
filter(value: string, search: string, keywords?: string[]) => boolean—
loopboolean—
PreviousComboboxNextContextMenu