Overlays

Omnibar

@xui/omnibar

A ⌘K-style command palette: a top-centred overlay with a search field and a keyboard-navigable result list. Toggle with [(open)]; Escape or a backdrop click closes. Items render with a custom [xuiSelectOption] template.

Install

pnpm add @xui/omnibar

Add the barrel to a standalone component's imports:

import { XuiOmnibarImports } from '@xui/omnibar';

@Component({
  imports: [XuiOmnibarImports],
  // …
})

Examples

Default

Source only — this one needs a component of its own to run, so there is nothing to render here.

<button class="bg-primary text-primary-foreground rounded-lg px-3 py-1.5 text-sm" (click)="open.set(true)">
  Open command palette
</button>
<p class="text-foreground-muted mt-3 text-sm">Last command: {{ last() ?? '—' }}</p>

<xui-omnibar [items]="commands" [(open)]="open" (itemSelected)="last.set($event)" />

API

XuiOmnibar

component

xui-omnibar

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

ariaLabel

stringAccessible name for the palette dialog.

'Command palette'

items

readonly T[]The commands to search over.

[]

itemText

(item: T) => stringHow an item is labelled. Also what the default filter matches against, so give it the text the user would type.

(item: T) => (item == null ? '' : String(item))

itemPredicate

(query: string, item: T) => booleanCustom filter for one item against the query. Defaults to a case-insensitive substring match on itemText.

—

itemDisabled

(item: T) => booleanWhich items cannot be chosen. They stay in the list, greyed out.

() => false

placeholder

stringText shown in the empty query field.

'Type a command or search…'

noResultsText

stringShown in place of the list when the query matches nothing.

'No results.'

resetOnClose

booleanClear the query when the palette closes, so it opens fresh next time.

true

open

two-way

booleanWhether the palette is showing. Two-way bindable with [(open)].

false

Outputs

Name

Type

itemSelected

TEmits the chosen command. Where the action goes — the palette only closes.

Source

libs/ui/omnibar/xui