@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/home-getting-started-installation.json

@@ -0,0 +1,621 @@
+{
+  "meta": {
+    "id": "Home-Installation-1746704940030",
+    "title": "Installation",
+    "description": "How to add Nimbus to your react frontend",
+    "order": 1,
+    "repoPath": "packages/nimbus/src/docs/home-installation.mdx",
+    "menu": [
+      "Home",
+      "Getting Started",
+      "Installation"
+    ],
+    "route": "home/getting-started/installation",
+    "tags": [
+      "guide",
+      "setup",
+      "installation"
+    ],
+    "toc": [
+      {
+        "value": "1. Install the nimbus packages",
+        "href": "#1-install-the-nimbus-packages",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Core Installation",
+        "href": "#core-installation",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "pnpm",
+        "href": "#pnpm",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "npm",
+        "href": "#npm",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "yarn",
+        "href": "#yarn",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Rich Text Editor (Optional)",
+        "href": "#rich-text-editor-optional",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "pnpm",
+        "href": "#pnpm-1",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "npm",
+        "href": "#npm-1",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "yarn",
+        "href": "#yarn-1",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "TypeScript Support",
+        "href": "#typescript-support",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "pnpm",
+        "href": "#pnpm-2",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Manual generation",
+        "href": "#manual-generation",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          3,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Design Token Autocomplete (Optional)",
+        "href": "#design-token-autocomplete-optional",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "pnpm",
+        "href": "#pnpm-3",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          4,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "npm",
+        "href": "#npm-2",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          4,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "yarn",
+        "href": "#yarn-2",
+        "depth": 4,
+        "numbering": [
+          1,
+          1,
+          4,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "2. Set up NimbusProvider",
+        "href": "#2-set-up-nimbusprovider",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Font Loading",
+        "href": "#font-loading",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "3. Use Nimbus Components",
+        "href": "#3-use-nimbus-components",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "4. Set up Testing (Optional)",
+        "href": "#4-set-up-testing-optional",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Jest",
+        "href": "#jest",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Vitest",
+        "href": "#vitest",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Troubleshooting",
+        "href": "#troubleshooting",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "TypeScript types not working",
+        "href": "#typescript-types-not-working",
+        "depth": 3,
+        "numbering": [
+          1,
+          5,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Next steps",
+        "href": "#next-steps",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Essential Reading",
+        "href": "#essential-reading",
+        "depth": 3,
+        "numbering": [
+          1,
+          6,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "Download",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/index.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
+  "views": {
+    "overview": {
+      "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/index.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
+      "toc": [
+        {
+          "value": "1. Install the nimbus packages",
+          "href": "#1-install-the-nimbus-packages",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Core Installation",
+          "href": "#core-installation",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "pnpm",
+          "href": "#pnpm",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "npm",
+          "href": "#npm",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "yarn",
+          "href": "#yarn",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Rich Text Editor (Optional)",
+          "href": "#rich-text-editor-optional",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "pnpm",
+          "href": "#pnpm-1",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "npm",
+          "href": "#npm-1",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "yarn",
+          "href": "#yarn-1",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "TypeScript Support",
+          "href": "#typescript-support",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "pnpm",
+          "href": "#pnpm-2",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manual generation",
+          "href": "#manual-generation",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Design Token Autocomplete (Optional)",
+          "href": "#design-token-autocomplete-optional",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "pnpm",
+          "href": "#pnpm-3",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "npm",
+          "href": "#npm-2",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            4,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "yarn",
+          "href": "#yarn-2",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            4,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "2. Set up NimbusProvider",
+          "href": "#2-set-up-nimbusprovider",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Font Loading",
+          "href": "#font-loading",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "3. Use Nimbus Components",
+          "href": "#3-use-nimbus-components",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "4. Set up Testing (Optional)",
+          "href": "#4-set-up-testing-optional",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Jest",
+          "href": "#jest",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Vitest",
+          "href": "#vitest",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Troubleshooting",
+          "href": "#troubleshooting",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "TypeScript types not working",
+          "href": "#typescript-types-not-working",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Next steps",
+          "href": "#next-steps",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Essential Reading",
+          "href": "#essential-reading",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}