Koori UI
Components

GlassCommand

A composable command palette / combobox built on cmdk.

Preview

Usage

import {
  GlassCommand,
  GlassCommandInput,
  GlassCommandList,
  GlassCommandEmpty,
  GlassCommandGroup,
  GlassCommandItem,
  GlassCommandSeparator,
} from "koori-ui";
 
<GlassCommand>
  <GlassCommandInput placeholder="Type a command..." />
  <GlassCommandList>
    <GlassCommandEmpty>No results found.</GlassCommandEmpty>
    <GlassCommandGroup heading="Suggestions">
      <GlassCommandItem>Search docs</GlassCommandItem>
      <GlassCommandItem>New file</GlassCommandItem>
    </GlassCommandGroup>
  </GlassCommandList>
</GlassCommand>

Parts

PartDescription
GlassCommandRoot container
GlassCommandInputSearch input with built-in icon
GlassCommandListScrollable list of groups and items
GlassCommandEmptyRendered when no items match
GlassCommandGroupGroup of items with an optional heading
GlassCommandItemSelectable item
GlassCommandSeparatorHorizontal divider
GlassCommandShortcutInline keyboard shortcut label

All cmdk props are passed through to the underlying primitives.

Previous

GlassCollapsible

Next

GlassContextMenu

On this page