Built-in Components

Callouts

Use callouts to highlight important information.

You can also customize the title:

Tabs

Use tabs to show alternative content, like different package managers. The default pills variant is the boxed switcher. Use variant="line" for prose (for example Cloud vs self-hosting). Children of TabItem are not Markdown-parsed — use HTML the same way as Callout.

npm install svelte-docs-starter

pnpm add svelte-docs-starter

yarn add svelte-docs-starter

Prose tabs (Cloud vs self-hosting):

Steps

Use steps for sequential instructions. For example:

Cards

Use cards to highlight features or key information:

Link Cards

Use link cards for navigation:

External links

Use DocsExternalLink (not raw <ExternalLink>) for outbound URLs in docs so links use text-primary, underline, and not-prose—they stay readable inside prose.

Optional props match the base anchor: trusted, follow, ariaLabel, class.

Badges

Use Badge from $lib/ui/components/docs/mdx/index.js for short labels in prose.

Release / status: New Experimental Deprecated v1.0.0

Docs semantics (pick variants so readers can scan by color — see web/src/content/docs/installation/vercel.md). Badge is DocsBadge.svelte; variant must be one of: default, new, deprecated, experimental, envBackend, envWeb, envRuntime, path, param.

• Backend env (no VITE_ prefix): BACKEND_DOMAIN_URL
• Web / Vite env: VITE_API_BASE_URL
• Runtime / platform: VERCEL
• Repo paths, env filenames, routes (often nested in DocsExternalLink to GitHub): backend/.env.development.local backend/vercel.json
• CLI flags, query keys, path params (when not using ParamField): --dry-run page
• URL examples (prefer / avoid): https://example.com vs https://example.com/; use the same new variant for local dev bases such as http://localhost:5173 or http://localhost:3000

Mermaid

Render sequence diagrams, flowcharts, and other Mermaid diagrams. Define the source in a <script> constant and pass it with string={…} (see Writing Content → Mermaid diagrams for the full pattern).

<script>
import { Mermaid } from '$lib/ui/components/docs/mdx/index.js';

const mcpFlow = `sequenceDiagram
    participant Agent as AI Agent
    participant MCP as OpenQuok MCP Server
    Agent->>MCP: Connect with opo_ Bearer token
    MCP-->>Agent: List available tools
`;
</script>

<Mermaid string={mcpFlow} />

File Tree

Display directory structures with nested Markdown lists inside <FileTree> (prefer this over a plain ```text tree for architecture pages):

API request / response panels

This repo ships RequestExample and ResponseExample cards (similar to common docs-site patterns) plus OpenApiOperationExamples, which loads GET /api/v1/openapi.json and fills curl + JSON from the openapi: frontmatter line. OpenApiPlayground renders the full try-it UI from the same spec.

Pages with openapi in YAML get a desktop split layout from DocsDocRenderer: the endpoint bar (method, URL, Try it) sits in the main column under the page title, with request/response code panels in the right rail. The left nav shows a compact HTTP method badge for those pages, and the right “Search / On this page” sidebar is hidden so the examples rail is the only right column. To keep the standard docs chrome (right sidebar + no method badge) on a page that still declares openapi for the split + playground, add docsLayout: standard to the frontmatter.

ParamField shows a request parameter name, type and location pills, required, and description. OpenApiDocSplit auto-injects Authorizations (when OpenAPI security requires your API key), plus path, query, and header parameters from the operation’s parameters array—use ParamField in Markdown only for extra narrative the spec does not carry.

<ParamField path="page" type="integer" location="query" default={1} description="1-based page index for paginated list endpoints." />

ResponseField documents JSON response properties (same pill layout, with optional pre / post label arrays):

<ResponseField name="data" type="object" post={["nullable"]} description="Payload when success is true; omitted or null on failure." />

To drop the same three blocks into a single column (e.g. custom MDX), use OpenApiOperationExamples:

<script>
	import { OpenApiOperationExamples } from '$lib/ui/components/docs/mdx/index.js';
</script>

<OpenApiOperationExamples operation="GET /public/social/{integration}" />