Code Window 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. Syntax Text colours it as it renders (comments, strings, numbers, keywords and punctuation) and numbers its lines with lineNumbers. FILE is the name in the tab, and it also names the code for screen readers. Keep lines to about 35 characters so a phone shows them whole. For another language than JavaScript or TypeScript, pass Syntax Text that language's keywords.

Yes. Nothing sets a dark scope: the stage is a bg-muted/40 tint, the window a raised bg-card with a border and a deep shadow, and the code colours come from your theme's tokens, so the block is light in a light theme and dark in a dark one. If you want an always-dark window, put the dark class on the window only, and say so in a code comment.

Generate a client and Read the docs are links (href="#"); point them at your sign-up and documentation pages. Each button renders the link it's given with render, with nativeButton={false}.

Yes. The snippet is real text in a pre, read as written and selectable; the window's dots and tab are hidden from assistive tech, and the line numbers stay out of a copy and out of the reading. The code sits 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. The headline is the page's h1, and with reduced motion nothing fades or rises: the text, the buttons and the code are there from the start.

The columns sit side by side from the lg breakpoint. Below it the text comes first, both buttons end on the first screen, and the framed window follows, with the code at 11px. A line longer than the window scrolls sideways inside it rather than wrapping, so every line stays beside its number.

Use the code window when what it's like to write with your product is the pitch: a few lines of real usage tell developers more than a feature list. Use a terminal hero, such as Dark Terminal Copy, when installing or running it is the point.