Components

Import these from @opentf/web-docs and use them inline in any .mdx page.

Callout

Admonition box. type is note, tip, info, warning, or danger; title is optional and defaults to the type.

import { Callout } from "@opentf/web-docs";

<Callout type="warning" title="Heads up">
  APIs may change while OTF Web is in pre-release.
</Callout>

Steps

Numbered walkthrough. Each child heading becomes a numbered step, so it composes with plain Markdown.

import { Steps } from "@opentf/web-docs";

<Steps>
### Install
Run `bun add @opentf/web`.

### Start the dev server
Run `bun run dev`.
</Steps>

Tabs

Switchable panels — handy for package-manager variants (npm / pnpm / bun) or any alternative content. Pass tabs as an array of { label, content }. content is rendered as-is: a string is plain text, a node is the node. For a code panel with a copy button, pass a CodeBlock.

import { Tabs, CodeBlock } from "@opentf/web-docs";

<Tabs tabs={[
  { label: "bun", content: <CodeBlock code="bun add @opentf/web" /> },
  { label: "npm", content: <CodeBlock code="npm i @opentf/web" /> },
]} />

Rendered:

bun add @opentf/web

npm i @opentf/web

pnpm add @opentf/web

CodeBlock

A code block for dynamic, runtime code — source you hold as a JavaScript value rather than a literal Markdown fence. Reach for it where a fence can't go: as the content of a Tabs panel, or any value built at runtime. It renders the same header-and-copy-button chrome as a fence. Props: code (the source, required), and optional lang (a language chip) and name (a filename shown in the header).

import { CodeBlock } from "@opentf/web-docs";

<CodeBlock lang="bash" name="terminal" code="bun add @opentf/web" />

Rendered:

bun add @opentf/web