#233
CodeTabs
Two CodeTabs groups, each with cURL and Node.js tabs, that share the selected language through the same sync key.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "CodeTabs" pattern (@codeatlasdev/ui demo #233, docs-kit/docs) in my app.
Call get_demo({ ids: ["#233"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: API docs that show the same request in several languages and keep the choice in sync across the page.
Keep these library parts, with the props and tokens the demo uses:
- CodeTab, CodeTabs from "@codeatlasdev/ui"
Behaviour to keep:
- Two `<CodeTabs sync="demo-lang">` blocks use the same sync key
- Each group has `<CodeTab label="cURL">` and `<CodeTab label="Node.js">`
- Tab content is `<div class="ca-code"><pre><code>` rendering a string constant such as `{curl}` or `{node}`
- First group sends a POST to messages/text, second group lists sessions with `{curlList}` and `{nodeList}`
- Wrapped in `<div class="ca-prose wrap">`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- CodeTab
@codeatlasdev/ui - CodeTabs
@codeatlasdev/ui
How it is built
- Two `<CodeTabs sync="demo-lang">` blocks use the same sync key
- Each group has `<CodeTab label="cURL">` and `<CodeTab label="Node.js">`
- Tab content is `<div class="ca-code"><pre><code>` rendering a string constant such as `{curl}` or `{node}`
- First group sends a POST to messages/text, second group lists sessions with `{curlList}` and `{nodeList}`
- Wrapped in `<div class="ca-prose wrap">`
Related
Loading source.