shadcn.io is not affiliated with official shadcn/ui
KPI Strip Pin Command Menu Block for Svelte
A KPI-strip command menu hung under an Edit strip button: ten metrics with sparklines and signed change, a star that pins up to four to the drawn strip, and a Name or Change sort.
Installation
Overview
Choose the four numbers a dashboard leads with using this metrics command menu for Svelte with Ark UI. It hangs under the Edit strip button of a page in Needlepoint, a KPI strip, 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: ten metrics found by name or by what they measure, each with a twelve-point sparkline, its figure and its change as an arrow, a sign and a percentage. The star on a row, or Enter, pins it to the strip, up to four, with "Pinned 3 of 4" in the top line; a fifth says why it cannot. A ToggleGroup sorts the rows by Name or by Change, pinned metrics stay on top, and the drawn strip behind the menu shows a tile for every pin. On a phone the sparkline is dropped. 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 pins, sort and query. For dashboards and report builders where the choice is which numbers to watch.
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 dashboard with a KPI strip, 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 pin or a sort 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.
What happens at the fifth pin?
Nothing is pinned. The top line changes from "Pinned 4 of 4" to "The strip holds 4. Unpin one to add Uptime." and the status line says the same, then the line goes back to the count on the next action. Unpinning with Enter or the star frees a place. The line keeps its height, so the list never moves.
How is the sparkline drawn?
As one SVG path computed from twelve typed points, scaled to the metric's own low and high and drawn in the text colour, left to right even in a right-to-left page. It is decoration: the figure and the change carry the meaning, and the row's hidden text reads them as words. It is hidden on phones.
How do the sort and the pins combine?
Pinned metrics always form the first group, and the switch orders each group: Name alphabetically, or Change with the biggest rise first. Changing the sort rebuilds the list and starts it at the top, and the search narrows within it. One option is always chosen, so the list is never unexplained.
What stays local, and how do I wire it?
All of it. The ten metrics, their points and changes are typed constants, and the pins are a list of ids in the block's state. In your app load METRICS from your data layer, save the pinned ids per user from pick (and show the saved strip on load), and keep the limit of four on the server too.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter pins or unpins, and Tab reaches the sort switch. The star is a mouse shortcut and stays out of the tab order. 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.