Split Layout Terminal Install Hero Block for React

Edit CODE, RESPONSE and FILE at the top of the file. CODE is a plain string whose lines and indentation are kept; SyntaxText colours its keywords, strings, numbers, calls and comments from the theme, with no highlighter package. RESPONSE is any value JSON can hold, and JsonText writes it out with its keys, strings and numbers coloured. FILE names the window and is what screen readers call the code.

It copies INSTALL_COMMAND, the same string the row shows, without the $ prompt, which is drawn beside it and left out of selection too. While the command is on the clipboard the button shows a check, and screen readers hear that it was copied; the button is named Copy the install command. Change the command in one place and the row and the clipboard stay in step.

The page follows your theme, but a code window is dark by nature, so the window alone carries the dark class: every token inside it (bg-background, border, text-muted-foreground, the syntax colours) takes the theme's dark values whatever the page's mode. That keeps the borders and the syntax colours readable on both pages, where an inverted bg-foreground panel would turn white in dark mode. Take the class off for a window that follows the page.

Yes. The code is real text, not an image: it is a region named after the file (deploy.ts), and it takes focus so a keyboard can scroll a line that's wider than the window. The line numbers, the window's dots and its title bar are hidden from assistive technology, so the code reads on its own, followed by the response. The headline is the block's one h1, and the closing band is a plain list.

The two columns stack below the lg breakpoint, the copy first and the code window under it with a rule between them, then the three cells one per row. The code steps down to 11 px and any line wider than the window scrolls inside it instead of widening the page, while the install command wraps rather than pushing the copy button out. The Shine Button ends within the first screen, down to 320 px.

The copy fades and rises in on load and the window settles in just after. Once the window scrolls into view, the code fades in token by token and the response types itself out, key by key. All of it is CSS, with no animation library; with reduced motion, the code and the response are simply there, and nothing moves.