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$

Command wraps cmdk with Glin UI glass tokens. Compose CommandInput, CommandList, CommandGroup, and CommandItem to build a fully keyboard-navigable palette.

TSX

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

Examples$

With Groups$

Use CommandGroup with a heading to visually separate related actions. Add CommandSeparator between groups.

TSX

1import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from "@glinui/ui"
2
3export function CommandGroupsDemo() {
4return (
5  <Command className="max-w-md">
6    <CommandInput aria-label="Command search" placeholder="Search..." />
7    <CommandList>
8      <CommandEmpty>No results found.</CommandEmpty>
9      <CommandGroup heading="Files">
10        <CommandItem>Open file</CommandItem>
11        <CommandItem>New file</CommandItem>
12      </CommandGroup>
13      <CommandSeparator />
14      <CommandGroup heading="Workspace">
15        <CommandItem>Settings</CommandItem>
16        <CommandItem>Extensions</CommandItem>
17      </CommandGroup>
18    </CommandList>
19  </Command>
20)
21}

With Shortcuts$

Append CommandShortcut inside any CommandItem to display a keyboard shortcut hint.

TSX

1import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandShortcut } from "@glinui/ui"
2
3export function CommandShortcutsDemo() {
4return (
5  <Command className="max-w-md">
6    <CommandInput aria-label="Command search" placeholder="Search..." />
7    <CommandList>
8      <CommandGroup heading="Navigation">
9        <CommandItem>
10          Profile
11          <CommandShortcut>⌘P</CommandShortcut>
12        </CommandItem>
13        <CommandItem>
14          New Window
15          <CommandShortcut>⌘N</CommandShortcut>
16        </CommandItem>
17        <CommandItem>
18          Settings
19          <CommandShortcut>⌘,</CommandShortcut>
20        </CommandItem>
21      </CommandGroup>
22    </CommandList>
23  </Command>
24)
25}

Empty State$

CommandEmpty renders when the search query returns no matching items.

TSX

1import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@glinui/ui"
2
3export function CommandEmptyDemo() {
4return (
5  <Command className="max-w-md">
6    <CommandInput aria-label="Command search" placeholder="Search for something rare..." />
7    <CommandList>
8      <CommandEmpty>No results found.</CommandEmpty>
9      <CommandGroup heading="Items">
10        <CommandItem>Visible item</CommandItem>
11      </CommandGroup>
12    </CommandList>
13  </Command>
14)
15}

Surface Variants$

TSX

1import { Command, CommandInput, CommandList, CommandGroup, CommandItem } from "@glinui/ui"
2
3export function CommandVariantsDemo() {
4return (
5  <div className="grid gap-3 md:grid-cols-2">
6    <Command variant="glass" size="sm">
7      <CommandInput aria-label="Command search" 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 aria-label="Command search" 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 aria-label="Command search" 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 aria-label="Command search" 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$

Keyboard navigation and roving focus are provided by cmdk.
Do not rely on placeholder text as a label. Provide an explicit aria-label or visible label for CommandInput.
Keep command groups concise to reduce cognitive load.
CommandEmpty provides a visible fallback for screen readers.

Reduced Motion$

Command interactions are state-based with no transform-heavy animations. Motion respects prefers-reduced-motion automatically.

API Reference$

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.

Source$

TSX

1import {
2  Command,
3  CommandInput,
4  CommandList,
5  CommandEmpty,
6  CommandGroup,
7  CommandItem,
8  CommandSeparator,
9  CommandShortcut,
10} from "@glinui/ui"

packages/ui/src/components/command.tsx

packages/ui/src/tests/command.test.tsx

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.