Install Command Snippet Hero Block for React

Edit INSTALL_COMMAND at the top of the file. The row shows it and the Copy button copies exactly that string. The $ before it is drawn apart from the command: it can't be selected, screen readers skip it, and it never reaches the clipboard. For a second command, such as a cd into the new folder, add another row with its own Copy button rather than joining them with &&.

The Copy button writes the command to the clipboard, swaps its icon for a check for three seconds, and tells screen readers "Copied". When the browser refuses (no clipboard permission, or a page not served over HTTPS) it shows a cross and says "Couldn't copy" instead. To count copies in your analytics, pass it onCopiedChange, which is called with true each time the check appears.

Edit STATS: each has a value, written as it should read (2.4M, 612), and a label. They're a description list, so screen readers read each label with its value. Each value sits in a bdi so a sign or a suffix keeps its place in a right-to-left layout, and the dividers come from divide-x, which flips sides there too. The band's top rule is drawn by its own Guides with marks="top", so the + marks land exactly on it. Three fit side by side down to 320 px.

The section is the page's spine: solid side rails and a top rule with + marks. The stats are a band: a full-column row whose own rule and marks come from Guides with rules="top" and sides={false}, and whose bottom edge is the next block's top rule, so no line is drawn twice.

The headline steps down from text-5xl to text-4xl, the buttons wrap when they don't fit side by side, and the command drops to text-xs. A command longer than the row wraps onto a second line instead of being cut off, so it can always be read in full beside its Copy button. The stats keep their three columns, their labels wrapping under the values. The Shine Button is on the first screen.

Use this one when installing is the whole pitch: one command, one button, and proof that people use it. Use a code window hero, such as Dark Code Window, when what it's like to write code with your product is the point, and a terminal hero when you want to show the command's output too.