shadcn.io is not affiliated with official shadcn/ui
Split API Playground Hero Block for React
A showcase hero for a payments API: a headline, a Shine Button, a second action and three ticks, then a wide playground under its own rule: a POST request beside the 200 response, each JSON body writing itself out.
Installation
Overview
A hero with an API playground below the copy, for React with Base UI. The section sits on the page's drafting lines: two solid rails at the edges of the page column that continue into the blocks above and below, and a rule along its top edge that runs to the page's edges, with a plus mark on each crossing. Every line is the theme's border colour, so it follows any preset. The header is left-aligned: an announcement pill links to Brindle's API v2, a payments API, then a headline, a subtitle, a primary ShineButton and an outline Button, both links, with three ticks at the end of the row on a wide screen. Under it a second rule, with plus marks on the rails, opens a wide window that runs between the rails and fades out at its foot: a tab strip for cURL, Node and Python, and two panes side by side. The request pane has a POST Badge with its path, a masked Authorization header and a JSON body; the response pane a 200 OK Status, its timing and the JSON that came back. Both bodies are JsonText: they write themselves out key by key, in your theme's colours, once they scroll into view. Made for payment APIs, API gateways, webhook platforms, backend-as-a-service products and SDK landing pages.
FAQ
How do I change the request and the response?
Edit REQUEST and RESPONSE at the top of the file. The request has a method, a path, an authorization header and a body; the response a status, a time and a body. The bodies are plain objects, not lines of text: JsonText formats them, indents nested objects and arrays, and colours strings, numbers and booleans with the theme's roles. HOST is the window's title and LANGUAGES the tab strip, which is a drawing.
How do I show a GET or a DELETE instead of a POST?
Change REQUEST.method; the badge is an outline Badge, so it reads the same for any method. For an error response, change RESPONSE.status to, say, 422 Unprocessable Entity and set the Status dot's variant to destructive. The status line stays foreground text, so it reads in every preset.
When do the JSON bodies play, and can I turn it off?
Each body starts writing once a quarter of it is on screen: keys type a character at a time, then each value fades in, with CSS animations and no script running per frame. Both bodies play once; reload to see them again. With reduced motion, or with JavaScript turned off, the JSON is simply there, complete. For a static body, use a plain pre instead of JsonText.
Can screen reader users read the code?
Yes. The playground is a figure named Example API request and response, and the method and path, the header, both JSON bodies, the status and the timing are real text, read in order and complete even while the animation plays. The window's title bar, with its dots and tab strip, is hidden, since it only decorates. The headline is the block's one h1, and the pill and both calls to action are links named by their text.
How do I make the playground send real requests?
The window shows an example; it doesn't call your API. For a live console, point the Get API keys link at your dashboard, or put your API explorer on its own page and link to it from the second call to action. If you do make this panel live, give the method and path real, labelled fields, send the request on a button press, and announce the response in a polite live region.
How does the hero fit on a phone?
The header stacks (text, then the ticks) and the two panes stack under it, request above response, still fading out at the foot. The code steps down from 12px to 11px so the longest line of JSON fits at 320px, a long path shortens with an ellipsis, and the Authorization header moves its value under its name. The headline steps down from text-5xl to text-4xl, and the Shine Button is on the first screen.
Related
- Pro
Split Layout GraphQL Query Hero
Code and terminalA showcase hero for a GraphQL gateway: the headline and the pitch with a Shine Button above a wide editor window in a hairline frame, with a schema explorer, a query that types itself in and its response.
- Pro
Split Layout Terminal Install Hero
Code and terminalA 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.
- Pro
Split Log Viewer Hero
Code and terminalA showcase hero with the headline and a Shine Button above a wide log window whose lines stream in like a live tail, in a hairline frame between solid rails.
- Pro
Code Window Hero
Code and terminalA split hero for an API client generator on solid rails: a headline and a Shine Button beside a code window whose snippet comes in token by token, in a hairline frame with + marks.
- Pro
Split Layout Database Schema Hero
Diagrams and mapsA split hero for a database tool: the headline, a Shine Button and three ticks beside a wide schema editor that runs flush to the page's end rail, with a model sidebar and a diagram whose foreign keys link to the rows they reference.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.