shadcn.io is not affiliated with official shadcn/ui
Customer Lookup Command Menu Block for Svelte
A CRM's command menu shown open over a customers page: ten customers found by name, email or company, each row naming and marking the field that matched, and a profile pane with plan, monthly value and last contact.
Installation
Overview
Find a customer and see why it matched with this customer command menu for Svelte with Ark UI. It opens from the customers page in Clientfold, a CRM, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: ten customers grouped by plan, found by name, email or company, and each row says which field matched in words and marks the letters ("Email: ana.ferreira@..."), or shows the company and the plan while nothing is typed. The pane follows the highlighted customer with initials, plan, monthly value, the date of the last contact and three buttons, Email, Add note and Open record, and Enter opens the record on the drawn page. On a phone the pane is dropped and the list takes the width. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same customers and query. For CRMs, support desks and any list people look up by half a remembered detail.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a customers page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a search or a note in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does a row say why it matched?
The block looks for the query in the name first, then the email, then the company, and the row's second line becomes that field's name in bold followed by its value with the typed letters marked, so a search for "brightwater" shows "Company: Brightwater Bakery". When the name itself matched, the name is marked and the line keeps the company and plan. A screen reader hears "matched on Email" after the name. Accents and case are ignored.
What do the pane's buttons do?
Email says a message was drafted and not sent, Add note counts a note for this session in the pane and says nothing was saved, and Open record puts the customer's name on the drawn page behind the menu. Enter on a row does the same as Open record. Nothing leaves the page, and the customers and their values are made up.
How does the pane follow the highlight?
The block keeps the highlighted row's value in state, fed by each library's own highlight event, and paneFor turns it into the customer; with no match the pane says there is no customer to show and its buttons are disabled. The pane has a fixed height, so moving the highlight never moves the list.
What stays local, and how do I wire it?
All of it. The ten customers, their plans, monthly values and last-contact dates are typed constants, and the amounts are formatted by a small helper so the server and the browser print the same. In your app load START from your CRM, call your own endpoints from act and pick, and keep the field-matching helper on the server if the book is large.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows and the pane follows, and Enter opens the record. The pane's buttons are reached with Tab from the field. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.