Components

The starter ships a handful of essential components, available globally in any MDX file without import:

• <Aside> — note / tip / caution / danger callouts
• <Card> + <CardGrid> — landing pages and feature lists
• <Tabs> + <TabItem> — multi-variant content
• <Steps> + <Step> — numbered procedures
• <PackageManagers> — install commands across npm / pnpm / yarn / bun

Aside

Cards

Steps

Package managers

For install commands, prefer <PackageManagers> over <Tabs> — it generates all four package-manager commands from a single source of truth and remembers the reader’s pick across pages.

npm i @cloudflare/nimbus-docs

yarn add @cloudflare/nimbus-docs

pnpm add @cloudflare/nimbus-docs

bun add @cloudflare/nimbus-docs

For dev dependencies:

npm i -D tailwindcss

yarn add -D tailwindcss

pnpm add -D tailwindcss

bun add -d tailwindcss

For non-install commands (run, exec, dlx):

npm run build

yarn run build

pnpm run build

bun run build

Tabs

Use <Tabs> for content that isn’t a package install — config snippets, OS-specific instructions, multi-language examples.

import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};

import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};

Code blocks

Fenced code blocks render through Shiki with a dual-theme palette. Premium features compose on top: filename frames, line / diff / focus highlighting, and word highlights — all driven by meta strings and inline notation.

Filename

```ts title="src/lib/cn.ts"
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

Renders as:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Line highlighting

Use the {1,3-5} meta syntax to emphasize specific lines, or // [!code highlight] inline.

function add(a: number, b: number) {
  const sum = a + b;
  // not this line
  console.log(sum);
  return sum;
}

Diff

Mark added and removed lines with // [!code ++] and // [!code --].

function greet(name: string) {
  console.log("Hello"); 
  console.log(`Hello, ${name}!`); 
}

Focus

// [!code focus] dims the surrounding code; hover the block to reveal.

const config = {
  site: "https://example.com",
  title: "Nimbus", 
  description: "Minimal docs starter",
  locale: "en",
};

Errors and warnings

// [!code error] and // [!code warning] tint the line accordingly.

function divide(a: number, b: number) {
  return a / b; 
  return a / 0; 
}

Word highlighting

// [!code word:foo] highlights every occurrence of foo. Or pass a /pattern/ directly in the meta.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return count;
}

Partials

Reuse a chunk of MDX across pages with <Render>. Partials live in src/content/partials/; include one by id (its path without the extension):

This text lives in src/content/partials/example.mdx and is pulled in with <Render file="example" />. Edit the partial once and every page that renders it stays in sync — handy for install steps, support notes, or any boilerplate you’d otherwise copy between pages.

Why so few?

Everything else (Accordion, FileTree, LinkCard, Embed, Frame, etc.) installs on demand via nimbus-docs add <name> from the registry. Keeps the starter lean.