Primitive / Moleculebeta

Command

Command palette for keyboard-driven actions and search.

@glinui/uiComponent: command

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add command

Usage

Basic

TSX

1import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Command className="max-w-md">
6      <CommandInput placeholder="Type a command..." />
7      <CommandList>
8        <CommandEmpty>No results.</CommandEmpty>
9        <CommandGroup heading="Suggestions">
10          <CommandItem>Calendar<CommandShortcut>⌘K</CommandShortcut></CommandItem>
11          <CommandItem>Search<CommandShortcut>⌘S</CommandShortcut></CommandItem>
12          <CommandItem>Settings</CommandItem>
13        </CommandGroup>
14      </CommandList>
15    </Command>
16  )
17}

Surface Variants

TSX

1import { Command, CommandInput, CommandList, CommandGroup, CommandItem } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="grid gap-3 md:grid-cols-2">
6      <Command variant="glass" size="sm">
7        <CommandInput placeholder="Glass palette" />
8        <CommandList>
9          <CommandGroup heading="Actions">
10            <CommandItem>Open settings</CommandItem>
11          </CommandGroup>
12        </CommandList>
13      </Command>
14      <Command variant="matte" size="sm">
15        <CommandInput placeholder="Matte palette" />
16        <CommandList>
17          <CommandGroup heading="Actions">
18            <CommandItem>Open settings</CommandItem>
19          </CommandGroup>
20        </CommandList>
21      </Command>
22      <Command variant="liquid" size="sm">
23        <CommandInput placeholder="Liquid palette" />
24        <CommandList>
25          <CommandGroup heading="Actions">
26            <CommandItem>Open settings</CommandItem>
27          </CommandGroup>
28        </CommandList>
29      </Command>
30      <Command variant="outline" size="sm">
31        <CommandInput placeholder="Outline palette" />
32        <CommandList>
33          <CommandGroup heading="Actions">
34            <CommandItem>Open settings</CommandItem>
35          </CommandGroup>
36        </CommandList>
37      </Command>
38    </div>
39  )
40}

Accessibility

Built on cmdk with keyboard-first navigation.
Input auto-focuses for immediate search.

Keyboard Interactions

Key	Action
`Arrow Up / Down`	Navigate between items.
`Enter`	Select the highlighted item.
`Escape`	Close the command palette.

ARIA Attributes

`role="listbox"` on list
`role="option"` on items
`aria-selected`

Reduced Motion

List transitions respect `prefers-reduced-motion`.

Affected properties

opacitytransform

API Reference

`Command`

Prop	Type	Required	Default	Description
`children`	`ReactNode`	-	`-`	CommandInput, CommandList, etc.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`default`	Surface style for the command root.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Density scale for input and item rows.
`className`	`string`	-	`-`	Additional class names.
`filter`	`(value: string, search: string) => number`	-	`-`	Custom filter function.
`shouldFilter`	`boolean`	-	`true`	Enable built-in filtering.

`CommandInput`

Prop	Type	Required	Default	Description
`placeholder`	`string`	-	`-`	Placeholder text for the search input.
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.

`CommandList`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.

`CommandGroup`

Prop	Type	Required	Default	Description
`heading`	`string`	-	`-`	Group heading label.
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.

`CommandItem`

Prop	Type	Required	Default	Description
`value`	`string`	-	`-`	Value used for filtering and selection.
`onSelect`	`(value: string) => void`	-	`-`	Called when item is selected.
`disabled`	`boolean`	-	`false`	Prevents interaction.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.

`CommandShortcut`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Command } from "@glinui/ui"

Source Files

command.tsx

command.test.tsxtest

Dependencies

@glinui/uicmdk

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/command.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

CommandProps

`CommandProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from commandVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost" \| "liquid" \| "matte"`	No	`"default"`	Variant option from commandVariants.