Component Library

Reusable enterprise documentation components available to every page in the Engineering Hub.

stableReferenceintermediatecomponentsauthoringstyle-guide

3 min readUpdated Jul 24, 2026@devex-teamDeveloper Experience

This page is the living reference for every reusable component available when authoring documentation in the Engineering Hub. Use it as a copy-paste starting point for new runbooks, architecture pages and SOPs — everything below renders using the same design tokens as the rest of the site.

Alerts, notices & callouts

Built on Starlight’s <Aside> component — use these for warnings, security notices and best practices.

Info cards

Why this matters

Use InfoCard for a single highlighted explanation inline with the surrounding prose.

Runbook prerequisite

Callers must have the oncall-responder role before running this procedure.

Feature / information cards

Architecture

Use Card/CardGrid for browsable groups of related links or concepts.

Deployment

Cards pick up the site’s rounded corners, borders and hover elevation automatically.

Read the architecture overviewSystem design and technical decisions.

Status badges

stable draft deprecated v2.1

Tabs — multi-environment examples

brew install zoos-cli
zoos-cli auth login

curl -fsSL https://get.zoos.dev | sh
zoos-cli auth login

iwr https://get.zoos.dev/win -UseBasicParsing | iex
zoos-cli auth login

Terminal & code blocks

Standard code block with copy button and line highlighting:

export function readingTime(body: string | undefined): number {
  const words = body?.trim().split(/\s+/).filter(Boolean).length ?? 0;
  return Math.max(1, Math.round(words / 220));
}

Terminal-style frame for CLI output:

$ zoos-cli deploy --env production
✔ Build uploaded (12.4 MB)
✔ Health checks passed
✔ Traffic shifted to production

Steps

Clone the repository and install dependencies.
Copy .env.example to .env and fill in local credentials.
Run npm run dev and open http://localhost:4321.

File trees

Directorysrc
- Directorycomponents
  - Directoryoverrides/
    …
  - Directorymdx/
    …
- Directorycontent
  - Directorydocs/
    …
- Directorylib
  - docs.ts

Tables

Environment	URL	Owner
Production	`app.zoosglobal.internal`	Platform Engineering
Staging	`staging.zoosglobal.internal`	Platform Engineering
Development	`localhost:4321`	You

Timeline

2026-07-07

Engineering Hub redesign shipped

New search-first homepage, repository catalog and reading experience.

2026-06-18

Datadog secret backend bundled into Agent

Standalone installs are no longer required for Agent 7.70+.

2026-06-02

Access control policy updated

Quarterly access reviews now require manager sign-off.

Accordion / FAQ

How do I add a new document?

Add a Markdown or MDX file under src/content/docs/<section>/. Frontmatter fields like category, tags and owner power the homepage widgets and search facets automatically.

How do repository pages get their metadata?

scripts/sync-github-readmes.mjs pulls README content and repo metadata (language, visibility) from the GitHub API on a schedule and regenerates pages under src/content/docs/repositories/.

Can I mark a page as pinned or featured?

Yes — set pinned: true or featured: true in frontmatter to surface a page on the homepage.

Checklist

Pre-deploy checklist

Run the full test suite locallyConfirm the change is behind a feature flagPost a heads-up in the on-call channelTag the release in GitHub

Metrics

182msp99 latency

0.04%Error rate

0Open incidents

14Deploys this week

Decision trees / troubleshooting flows

QIs the service returning 5xx errors?

Yes

Check whether a deploy happened in the last hour and roll back if so. Otherwise, escalate to the on-call engineer.

Check upstream dependency health dashboards in Datadog before escalating.

Service catalog entries

checkout-apioperational

tier-0@platform-team

Depends on

postgres-primaryredis-sessionspayments-gateway

Have an idea for a new component? Open an issue in the documentation repository — see the sync notice on each repository page for the source link.