Centered Command Palette Mockup Hero Block for React

Edit GROUPS at the top of the file. Each group has a name and its commands; each command has a Lucide icon, a label and its keys, one key cap each in the order they're pressed, so ["⌘", "⇧", "."] draws three caps. Shortcuts read left to right in every layout, right-to-left ones included. The first command of the first group is drawn as the selected one. A long label shortens with an ellipsis rather than pushing its keys off the row.

No: it's a picture of one, so it has no input and nothing in it can be clicked or focused. For a palette that works, open our Command in a dialog from the secondary button and from ⌘K and Ctrl K; the Command docs have a palette example that listens for both. Keep the sketch, or swap it for a button that opens the real thing.

The subtitle and the sketch show the Mac keys, as most keyboard-first products do in their marketing. If your audience is mostly on Windows or Linux, change ⌘ to Ctrl in the subtitle, its sr-only "Command K" and the sketch's key caps, and make sure your real shortcut answers to both metaKey and ctrlKey.

The headline is the page's one h1, and the subtitle reads "Press Command K to create, assign and jump anywhere in Cinder": the key caps are hidden and an sr-only "Command K" says them, since a screen reader may read ⌘ as "place of interest sign". The palette sketch is decoration, hidden from screen readers and made inert, so Tab goes from the two links straight past it.

The headline balances over three lines at text-4xl, and the two calls to action sit side by side or wrap, with the Shine Button on the first screen. The palette keeps its search bar and the four Suggestions, fading out at its foot; the Go to group is hidden below sm.

The link, headline, subtitle and buttons fade and rise in, the palette rises in after them, and its commands slide in from the side you read from, one after another. It's all CSS transitions that play once on load. With reduced motion on, everything is in place from the start.