Install Command Hero Block for React

Edit COMMAND at the top of the file: the row shows it and the Copy button copies exactly that string. The $ prompt before it is decoration: hidden from screen readers, left out of a copy, and skipped when someone selects the command by hand. A long command wraps inside the row on a narrow screen rather than overflowing it.

Set username and repo on GitHub Stars Button to your repository. It's given count, so it shows that number and never calls GitHub; leave count out and it asks GitHub's API once per page load, in the browser, and shows its label alone if that fails. The pill and the stats band are plain text: when you pass a count from your server or build, write it there too.

Read the quickstart is the one main action, a Shine Button: a band of light sweeps across it once when the pointer arrives or it takes focus. Star on GitHub is the second action, an outline button that opens your repository in a new tab and tells screen readers so. The pill is a link (href="#") too: point it at your repository, and the quickstart at your documentation. The Shine Button renders the link it's given with render, with nativeButton={false}.

The command goes to the clipboard, the copy icon turns into a check for three seconds, and screen readers hear "Copied" from a polite status inside the button, which is named "Copy the install command". When the browser refuses the clipboard, as on a page not served over HTTPS, a cross shows instead and they hear "Couldn't copy"; the command is still there to select.

The headline steps down from text-5xl to text-4xl, the command wraps inside its row next to the Copy button, and the two buttons stack when the row is too narrow, both inside the first screen. The stats band keeps its three cells side by side with smaller figures, and each figure keeps its order in a right-to-left layout.

Use it when your community is the pitch: the star count, the stats band and the star button all say people use and back the project, and the install command is one line. When showing what the tool prints or does is the point, a terminal hero such as Dark Terminal Copy gives that output the room.