Terminal Copy Command Hero Block for React

Edit COMMAND at the top of the file. It's what the terminal shows after the prompt and exactly what the copy button puts on the clipboard: the $ is drawn beside it, so it's never copied with it. Use any one-line command, such as npm create, curl … | sh or brew install. The terminal is laid out left to right even on a right-to-left page, the way a terminal reads, and a command too long for a narrow screen ends in an ellipsis rather than pushing the layout wide. Edit STEPS to change what the terminal lists under it.

CopyButton writes the command with the Clipboard API, then swaps its copy icon for a check for three seconds, and a screen reader hears Copied. If the browser refuses (no permission, or a page that isn't served over HTTPS), the icon becomes a cross and the screen reader hears Couldn't copy, so nobody pastes an empty clipboard thinking it worked. To log copies, pass onCopiedChange: it's called with true when the check shows.

No, it follows your theme. The window is bg-card with a hairline border and a soft shadow, and the output is plain text colours, so in a light theme the terminal is light and in a dark theme it is dark. If you want a terminal that is dark on a light page too, put the dark class on the window only, never on the section, and say so in a comment.

Get started is the one main action, a Shine Button: a band of light sweeps across it once when the pointer arrives or it takes focus. Read the docs is an outline button. Both are links (href="#"); point them at your quickstart and your documentation. Each button renders the link it's given with render, with nativeButton={false}.

Yes. The command is real, selectable text in a code element, and the prompt before it is hidden from screen readers. The copy button is named Copy install command, so it says what it copies, and it announces the result in a polite status inside it. The listed output is a picture of the result, so it's hidden from assistive tech. The headline is the page's one h1, and the stats are a description list, so each figure is read with its label.

The two columns stack below the lg breakpoint, the text first and the terminal under it between two hairlines, so the Shine Button is inside the first screen. The headline steps down from text-5xl to text-4xl and balances its lines. Below the sm breakpoint the terminal drops to 12px and the copy button shows its icon only, keeping its full name for screen readers. The three stats keep equal columns with their dividers.

Edit STATS: each has a value, written as you want it shown (50K+, 12M, 24), and a label. They're laid out as three equal columns with a divider between each, which flips sides in a right-to-left layout. Keep three, or change grid-cols-3 to match; short values keep the columns readable on a phone.