Split Code Preview Hero Block for React

Edit CODE at the top of the file: it's the snippet as you'd write it, its lines and indentation kept, and it's also exactly what the copy button copies. Syntax Text colours it as it renders (comments, strings, numbers, keywords and punctuation). FILE is the name in the tab, and it names the code for screen readers. Keep it short enough to match the headline's promise; for another language than JavaScript or TypeScript, pass Syntax Text that language's keywords.

It copies CODE, the whole snippet, to the clipboard. Its icon turns into a check for three seconds and screen readers hear "Copied"; if the browser refuses, which happens on a page not served over HTTPS, it shows a cross and says "Couldn't copy". To copy something else, such as only the install command, pass that text as its content.

A code window is dark by nature, like a terminal, so only the window carries the dark class: everything inside it reads your theme's dark tokens, with no overrides. The headline, the checks, the buttons, the frame and the page's lines follow the theme, light or dark. A comment in the file says so. Remove the dark class for a window that follows the page too.

The section is the page's spine: solid side rails and a top rule running to the viewport edges with + marks. The code is a framed figure: Guides with extend="sm" and marks="corners" draw a hairline box with + marks around the window. The text column is the split divider: lg:border-s, with + marks where it meets the top rule.

Yes. The snippet is real text, read as written and selectable, in a region named after the file that Tab can reach, so a line wider than the window can be scrolled with the arrow keys. Only the window's dots and tab are hidden from assistive tech; the copy button is a real button named "Copy the code", and it announces the result. The headline is the page's h1, and with reduced motion nothing fades in or scales.

Below the lg breakpoint the two halves stack with the copy first, so the Shine Button sits on the first screen, then the framed code window under one rule. The headline steps down from text-5xl to text-4xl, the buttons wrap when they don't fit side by side, and the code drops to 12px. A line longer than the window scrolls sideways inside it rather than wrapping.

Use this split layout when you have a value proposition to make beside the code: a headline, a few checks and two calls to action. Use a centred hero such as Dark Code Window or Code Snippet when the code, or the install command, is the whole message and deserves the middle of the page.