shadcn.io is not affiliated with official shadcn/ui
Split Layout Terminal Install Hero Block for Solid
A compact reverse split hero for an SDK: a dark code window with a deploy call and its JSON response beside the headline, a copyable install command and a Shine Button, over a closing band of three ruled feature cells.
Installation
Overview
A compact reverse split hero between solid rails, for Solid with Ark UI. The code window sits at the start: a dark window named after its file, where SyntaxText writes out a deploy call with line numbers and JsonText writes out the response under it. Past a divider come an announcement link, the headline, a supporting sentence, an install command with a CopyButton, and two calls to action: a ShineButton, the only primary control, and an outline Button, both links. A closing band of three ruled cells with icons (typed, dependency-free, global) ends the block. The block follows your theme; only the window is dark, because its colours come from a dark scope rather than inverted tokens. The product is Plover, a fictional edge-deployment SDK. On phones the copy comes first, then the window, then the three cells stacked. For SDKs, npm packages, CLIs and APIs whose visitors write code.
FAQ
How do I show my own code and response?
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.
What does the copy button copy, and how does it confirm?
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.
Why is the code window dark when the page is light?
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.
Can screen reader and keyboard users read the code?
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.
How does it fit on a phone?
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.
What animates, and can I turn it off?
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.