Multi-Language Code Tabs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools29.tsx instead.

Usage

The file also exports devtools29Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools29, devtools29Demo } from "@/components/blocks/devtools/devtools29";

export default function Page() {
  return <Devtools29 {...devtools29Demo} />;
}

Props

Types

type CodeToken = { text: string; tone?: "keyword" | "string" };

type CodeSample = {
  language: string;
  fileName: string;
  /** Canonical text copied to the clipboard; `lines` is a hand-highlighted rendering of this same text. */
  code: string;
  lines: CodeToken[][];
};

Behavior notes

• Tab switching is real client-side state: clicking a language tab updates which sample is active, re-renders the code panel with that sample's lines, updates the window header's filename to that sample's fileName, and marks the clicked tab visually active via aria-selected.
• The copy button is real (navigator.clipboard.writeText) and always copies the active sample's code field, the canonical plain-text version, not the highlighted lines markup. Copied state resets to the icon whenever you switch tabs.
• Syntax coloring is a simplified manual approximation, not a real tokenizer: each sample's lines array is a hand-authored list of text/tone spans ("keyword" or "string") that must already match the plain code string word-for-word. There is no lexer or language grammar involved, so if you edit code without also updating lines to match, the copied text and the on-screen text will silently diverge.
• Only a couple of tokens per line are ever tagged with a tone in the bundled samples, in keeping with that being a lightweight visual approximation rather than full syntax highlighting.