CodeBlock variants

Code

import { CodeTabs, packageManagerTabs } from "@fadymondy/nasaq/web";export function Install() {  return <CodeTabs syncKey="pm" aiCopy tabs={packageManagerTabs("@nasaq/web")} />;}

Developer Tools · stable

Live examples and controls: CodeBlock variants in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/code-block-variants.json

Three ways to present code that build on CodeBlock without changing it. CodeTabs shows one snippet in several forms (package managers, languages) and copies the visible one. CodeBlockAI and CodeCopyMenu add a copy menu: Copy code, Copy as Markdown, and a ready prompt for Claude, ChatGPT or Cursor, with links that open the assistant with the prompt filled in. CommandSnippet is a one-line command with a copy button that is always visible. Every panel is a real CodeBlock, so highlighting, line numbers and left-to-right code in Arabic pages come for free.

When to useCopy Anchor Link

• Install and quick-start docs where the reader picks their package manager or language.
• Snippets a reader will hand to an AI assistant (the menu builds the prompt for them).
• A single terminal command to copy: npm i @nasaq/web.

When not to useCopy Anchor Link

• A plain snippet: use CodeBlock.
• A secret or key: use CopyField from copy-button.
• Live command output: use Terminal.

ImportCopy Anchor Link

import { CodeTabs, CodeBlockAI, CommandSnippet, packageManagerTabs } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CodeTabs, packageManagerTabs } from "@fadymondy/nasaq/web";

export function Install() {
  return <CodeTabs syncKey="pm" aiCopy tabs={packageManagerTabs("@nasaq/web")} />;
}

AnatomyCopy Anchor Link

CodeTabs          data-slot="code-tabs"           <div dir="ltr">
├─ tab list       (Tabs)                          pnpm | npm | yarn | bun
└─ panel          CodeBlock                       one per tab, copy button or copy menu in the header
CodeBlockAI       CodeBlock with copyAction=CodeCopyMenu
CodeCopyMenu      data-slot="code-copy-menu"      split button + DropdownMenu
CommandSnippet    data-slot="command-snippet"     <div dir="ltr"> prompt + command + CopyButton

APICopy Anchor Link

CodeTabsCopy Anchor Link

CodeBlockAICopy Anchor Link

Everything CodeBlock takes, plus instruction?, targets? (["claude","chatgpt","cursor"]), openLinks? (default true), onCopy?(kind, text, target?) and menuLabels?.

CodeCopyMenuCopy Anchor Link

The split button on its own: code, language?, filename?, instruction?, targets?, openLinks?, onCopy?, labels?. Pass it to CodeBlock as copyAction.

CommandSnippetCopy Anchor Link

HelpersCopy Anchor Link

packageManagerTabs(pkg, { dev?, global?, managers? }), execTabs(command, { managers? }), installCommand, execCommand, toMarkdown(code, language?, filename?), buildPrompt({ code, language, filename, instruction, target }), aiLink(target, prompt) (a URL, or null when the prompt is too long for a link), stripPrompt. All pure functions.

ExamplesCopy Anchor Link

LanguagesCopy Anchor Link

<CodeTabs
  tabs={[
    { label: "curl", language: "bash", code: 'curl -H "Authorization: Bearer $KEY" https://api.example.com/v1/me' },
    { label: "JavaScript", language: "js", code: 'const me = await fetch("/v1/me").then((r) => r.json());' },
    { label: "Python", language: "python", code: 'me = requests.get("https://api.example.com/v1/me").json()' },
  ]}
/>

Copy for AICopy Anchor Link

<CodeBlockAI language="ts" filename="retry.ts" instruction="Explain this and add jitter." code={source} />

AccessibilityCopy Anchor Link

• Tabs and the menu are Base UI, so roles, roving focus and focus return are handled.
• Copy results are announced in a live region.
• The "open in" items are links that open in a new tab; they say so in their label.

RTL & i18nCopy Anchor Link

• Code, tab labels and commands are dir="ltr" inside Arabic pages. The menu and its labels follow the page.
• Built-in strings in English and Arabic; override with labels.
• Very long prompts do not fit a link: the prompt is copied instead and the message says so.
• Assistant names are shown as text; no logos are bundled.

Styling & tokensCopy Anchor Link

• Surfaces and borders: bg-nq-surface-soft, border-border, rounded-control. Hover uses bg-nq-hover, focus outline-nq-focus.
• Slots: code-tabs, code-copy-menu, command-snippet.

Do / Don'tCopy Anchor Link

• Do give related install blocks the same syncKey.
• Do set instruction so the prompt says what you want done.
• Don't put secrets in a snippet that offers "open in": the code goes into the link.
• Don't use tabs for more than about five variants.

RelatedCopy Anchor Link

• CodeBlock · CopyButton · Tabs · DropdownMenu

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-developer-tools-code-block-variants--docs