Command

Assign to

The same component as a people picker, pre-filtered by the typed letter.

"use client"
import {
  Avatar,

"use client"


import {
  Avatar,
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut
} from "@glinui/ui"


export function CommandUsersExample() {
  const people = [
    { name: "Ava Kim", role: "Owner", initials: "AK" },
    { name: "Jon Reyes", role: "Admin", initials: "JR" },
    { name: "Sara Patel", role: "Editor", initials: "SP" },
    { name: "Mia Chen", role: "Viewer", initials: "MC" }
  ]
  return (
    <div className="mx-auto w-full max-w-sm">
      <Command className="rounded-2xl border border-[var(--line-soft)]">
        <CommandInput placeholder="Assign to..." defaultValue="a" />
        <CommandList>
          <CommandEmpty>Nobody matches that name.</CommandEmpty>
          <CommandGroup heading="People">
            {people.map((person) => (
              <CommandItem key={person.name} value={person.name}>
                <Avatar size="xs" fallback={person.initials} alt="" />
                {person.name}
                <CommandShortcut>{person.role}</CommandShortcut>
              </CommandItem>
            ))}
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  )
}

Variants

Every look of the shared vocabulary: glinr (the default), plain (shadcn), solid, soft, outline, ghost, gradient and glass. Omit `variant` to follow the ambient design style.

import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from "@glinui/ui"
const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const
export function Demo() {

import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="grid gap-3 md:grid-cols-2">
      {variants.map((variant) => (
        <Command key={variant} variant={variant} size="sm">
          <CommandInput placeholder={`${variant} palette`} />
          <CommandList>
            <CommandGroup heading="Actions">
              <CommandItem>Open settings</CommandItem>
              <CommandItem>Invite teammate</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      ))}
    </div>
  )
}

Glass (opt-in)

variant="glass" is opt-in. It blurs and tints what sits behind the panel (with a readable opacity floor), so it needs a colourful or photographic backdrop: switch the stage backdrop to see it.

import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from "@glinui/ui"
export function Demo() {
  return (

import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from "@glinui/ui"


export function Demo() {
  return (
    <Command variant="glass" className="max-w-md">
      <CommandInput placeholder="Search..." />
      <CommandList>
        <CommandGroup heading="Actions">
          <CommandItem>Open settings</CommandItem>
          <CommandItem>Invite teammate</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

With Groups

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

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

export function CommandGroupsDemo() {
  return (
    <Command className="max-w-md">
      <CommandInput aria-label="Command search" placeholder="Search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Files">
          <CommandItem>Open file</CommandItem>
          <CommandItem>New file</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Workspace">
          <CommandItem>Settings</CommandItem>
          <CommandItem>Extensions</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

With Shortcuts

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

import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandShortcut } from "@glinui/ui"

export function CommandShortcutsDemo() {
  return (
    <Command className="max-w-md">
      <CommandInput aria-label="Command search" placeholder="Search..." />
      <CommandList>
        <CommandGroup heading="Navigation">
          <CommandItem>
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            New Window
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            Settings
            <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Empty State

`CommandEmpty` renders when the search query returns no matching items.

import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@glinui/ui"

export function CommandEmptyDemo() {
  return (
    <Command className="max-w-md">
      <CommandInput aria-label="Command search" placeholder="Search for something rare..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Items">
          <CommandItem>Visible item</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Keyboard Interactions

ARIA Attributes

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

Affected properties

Command

CommandInput

CommandList

CommandGroup

CommandItem

CommandShortcut