NextGuide

Code windows & tabs

Real tabbed code panels with copy actions and language-specific icons.

Code windows & tabs

Titled, copyable snippet

Preview
Install NextGuideShell
bun add nextguide@alpha
bunx nextguide init --developer
import { CodeWindow, CodeTabs } from "nextguide/blocks"

<CodeWindow title="Install NextGuide" language="bash" code={"bun add nextguide@alpha\nbunx nextguide init --developer"} />

Choose TypeScript or JavaScript from a dropdown

Provide the real code for each language. NextGuide does not attempt to transpile TypeScript into JavaScript. The user selects a language in a themed, keyboard-accessible dropdown, and the copy button copies the currently displayed snippet.

Preview
lib/docs
import { createDocs, type DocsConfig } from "nextguide/mdx"

const options: DocsConfig = { contentDir: "content/docs" }
export const docs = createDocs(options)
import { CodeWindow } from "nextguide/blocks"

<CodeWindow
  title="lib/docs"
  language="typescript"
  code={'const options: DocsConfig = { contentDir: "content/docs" }'}
  alternatives={[
    { language: "javascript", code: 'const options = { contentDir: "content/docs" }' },
  ]}
/>

The language header uses separate TypeScript and JavaScript icons, a JSON file icon, a terminal for shell commands, and suitable icons for MDX and other source languages. The dropdown is optional; plain CodeWindow examples still work without changes.

Switch between package managers

Preview
BunShell
bun add nextguide@alpha
import { CodeWindow, CodeTabs } from "nextguide/blocks"

<CodeTabs items={[{label:"Bun",language:"bash",code:"bun add nextguide@alpha"},{label:"npm",language:"bash",code:"npm install nextguide@alpha"},{label:"pnpm",language:"bash",code:"pnpm add nextguide@alpha"}]} />

Both components copy the original source text, not HTML formatting. Pass a plain code string; CodeTabs receives a list of label, language, and code entries.