Command
A searchable palette in two states, the row it is built from in twelve, and the group, heading and rule that go between them.
All six rows carry real commands. The bottom three were placeholders reading Command Item Text with ⌘P three times over and now read Profile, Billing and Settings with their own shortcuts, so the main is usable the moment you drop it in. Its height is unchanged at 272: adding a second group heading above them, as the usage frame does, would take it to 301.
The two variants use different second axes
Four axes multiply out to twenty-four and the file publishes twelve, but not by dropping half at random. Default pairs with Selected and never carries a shortcut; Icon pairs with Show Shortcut and is never selected. A row either records a choice or triggers an action, and the file refuses to draw one that claims to do both.
Hover tints the row to base.muted and changes nothing else. Disabled drops the whole row to 50% rather than recolouring the label. That keeps a shortcut readable as a shortcut in every state, which matters in a palette where the whole right-hand column is grey by design.
The shortcut is base.muted-foreground in every state, hover included. Darkening it on hover makes the row look like it gained a second label, and the shortcut is a reminder rather than a thing you are choosing between.
A palette and the four things it is made of
the whole palette, 384 × 272 or 112
a row, 296 × 32 at radius 6
a heading and its rows, 376 × 228
a group heading, 249 × 28
a 1px rule, 224 wide
Five palettes, all of them searchable
The second frame is 1040 by 1270. The copy is the file's, and the two that carry a query are live: type in either search field and the groups filter with it.
Five components, fourteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Command
Because the two variants take different second axes. Default pairs with Selected and never shows a shortcut; Icon pairs with Show Shortcut and is never selected. A row either records a choice or fires an action, and the file will not draw one claiming both. Three states each, so six and six.
Swaps the whole result area for a single centred line reading No results found., which takes the palette from 272 down to 112. The search row is unchanged, so the box shrinks around the message rather than leaving an empty well below it.
The file draws it as an InputGroup at base.border with a 10px radius, sitting inside the 4px padding of the palette. shadcn/ui underlines it instead. Filling it makes the field read as part of the popover rather than as a border cutting across it, which is the call this kit made.
At the end of the row, as a 16px check, and it belongs to Command / Item rather than to the list. A theme picker or any single-choice palette works without a wrapper, because the row already knows whether it is the chosen one.
No. It drops the whole row to 50% and leaves every colour alone. That keeps the shortcut column reading as one thing down the right-hand side, which it would not if disabled rows recoloured their labels and their shortcuts by different amounts.