Command palettes (HEEx)

LiveView Cmd+K modal. Phoenix.LiveView.JS show/hide + phx-keyup filter. Pair this page with the React variant — they install conflicting global hotkeys, so the demos live on separate pages.

Preview

LiveView (HEEx)

alias DesignSystem.UI.CommandPalettes

<Buttons.button phx-click={CommandPalettes.show_palette("#cmdk")}>
  Open
</Buttons.button>

<CommandPalettes.command_palette id="cmdk" on_search="search">
  <:item :for={r <- @results} phx-click={"select-#{r.id}"}>{r.label}</:item>
</CommandPalettes.command_palette>