A Command-K destination search with a native dialog and link baseline.
app/components/nitro_kit/command_palette.rbNitroKit::CommandPalette.new(id:, search_url: nil) { |palette| palette.destination(...) }A native dialog and links remain usable without JavaScript; enhancement adds Command-K, filtering, and result announcements.
test/dummy/app/components/gallery/components/command_palette_page.rbrender NitroKit::CommandPalette.new(
id: "gallery-command-palette-workspace",
label: "Search workspace…",
placeholder: "Search destinations…",
shortcut: false
) do |palette|
palette.destination("Dashboard", href: "#dashboard", description: "Workspace overview")
palette.destination("Projects", href: "#projects", description: "Active and archived work")
palette.destination(
"Billing",
href: "#billing",
description: "Plans, invoices, and payment methods"
)
palette.destination("Team members", href: "#team-members")
palette.destination(
"Buttons",
href: "/gallery/components/button",
description: "Component reference"
)
endThe default shortcut: true owns Command-K, labels the trigger hint, and exposes aria-keyshortcuts.
test/dummy/app/components/gallery/components/command_palette_page.rbrender NitroKit::CommandPalette.new(
id: "gallery-command-palette-shortcut",
label: "Search workspace…",
placeholder: "Search destinations…"
) do |palette|
palette.destination("Dashboard", href: "#dashboard", description: "Workspace overview")
palette.destination("Projects", href: "#projects", description: "Active and archived work")
palette.destination("Billing", href: "#billing", description: "Plans and invoices")
endA long result list scrolls inside the panel instead of growing past its 26rem cap.
test/dummy/app/components/gallery/components/command_palette_page.rbrender NitroKit::CommandPalette.new(
id: "gallery-command-palette-many",
label: "Search workspace…",
placeholder: "Search destinations…",
shortcut: false
) do |palette|
(1..18).each do |number|
palette.destination(
"Quarterly compliance and audit-retention report #{number}",
href: "#report-#{number}",
description: "Retention evidence, reviewer sign-off, and export history for period #{number}"
)
end
endThe search form targets a Turbo Frame; the endpoint returns CommandPalette::Results HTML.
app/controllers/command_palette_results_controller.rb + index viewGET query → NitroKit::CommandPalette::Results.new(id: same_palette_id)test/dummy/app/components/gallery/components/command_palette_page.rbrender NitroKit::CommandPalette.new(
id: "gallery-command-palette-async",
label: "Search workspace…",
placeholder: "Search destinations…",
search_url: gallery_command_palette_results_path,
shortcut: false
) do |palette|
palette.destination("Dashboard", href: "#dashboard", description: "Workspace overview")
palette.destination("Projects", href: "#projects", description: "Active and archived work")
palette.destination("Billing", href: "#billing", description: "Plans and invoices")
endConstructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.
docs/component_contracts.md · NitroKit::CommandPalette
id:label:, placeholder:, empty_text:, close_label:, and shortcut_label: defaulting to I18n.t("nitro_kit.command_palette.*")shortcut: truesearch_url: nildiv[data-nk=command-palette] owning one native dialog and turbo-frame[data-nk=command-palette-results]destination(label, href:, description: nil, html:, aria:, data:, desperately_need_a_class:) declarations. The full native link list and declarative dialog trigger work without JavaScript; enhancement reveals filtering, adds translated result announcements, and opens or closes the palette with Command-K or Control-K when shortcut: true. shortcut: false omits the global shortcut and its visible hint so more than one palette can be composed without conflicting global owners. search_url: turns the search region into a debounced GET form whose query field targets the owned Turbo Frame. The endpoint returns NitroKit::CommandPalette::Results.new(id:) with the same stable ID; zero results are valid. Applications render only authorized destinations and own current-route and search policy.Application conventions this component belongs to. Each summary is the leading section of its pattern document.
docs/patterns/application_foundation.md
User, Team, and Membership; roles belong to memberships, and tenant-owned records load through Current.team.AppShell for the authenticated product and one application-owned content gutter inside shell.main.Toolbar; keep destinations in AppNavigation.Toast::FlashMessages region for server feedback.Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.
test/dummy/app/components/gallery/agent_rules.rb
render NitroKit::Button.new("Save", variant: :primary).ArgumentError; this component's accepted options are in the contract above.html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.--nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.data-state when styling or behavior also needs it.