> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecge.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Control the look, feel, and behavior of your ecge project using the config file

Every ecge project requires an `ecge.config.json` file in the root directory. This file defines your project's core settings.

## Properties

<ResponseField name="name" type="string" required>
  The name of your project. Used as the global title and in metadata.

  Example: `"my-app"`
</ResponseField>

<ResponseField name="navigation" type="Navigation[]" required>
  An array of groups defining the pages in your sidebar navigation.

  <Expandable title="Navigation">
    <ResponseField name="group" type="string">
      The display name of the group.

      Example: `"Getting Started"`
    </ResponseField>

    <ResponseField name="pages" type="string[]">
      Relative paths to the MDX files that serve as pages.

      Example: `["quickstart", "configuration"]`
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="logo" type="string or object">
  Path to a logo image, or an object with separate light and dark mode logos.

  <Expandable title="Logo">
    <ResponseField name="light" type="string">
      Path to the logo displayed in light mode.
    </ResponseField>

    <ResponseField name="dark" type="string">
      Path to the logo displayed in dark mode.
    </ResponseField>

    <ResponseField name="href" type="string" default="/">
      URL the logo links to when clicked.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="favicon" type="string">
  Path to the favicon image.
</ResponseField>

<ResponseField name="colors" type="Colors">
  Hex color codes for your project's theme.

  <Expandable title="Colors">
    <ResponseField name="primary" type="string" required>
      The primary accent color used for highlights, links, and interactive elements.
    </ResponseField>

    <ResponseField name="light" type="string">
      The accent color used in dark mode.
    </ResponseField>

    <ResponseField name="dark" type="string">
      The color used for primary buttons and CTAs.
    </ResponseField>

    <ResponseField name="background" type="object">
      Background colors for light and dark mode.

      <Expandable title="Object">
        <ResponseField name="light" type="string" required>
          Background color in light mode.
        </ResponseField>

        <ResponseField name="dark" type="string" required>
          Background color in dark mode.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="topbarLinks" type="TopbarLink[]">
  Links displayed in the top navigation bar.

  <Expandable title="TopbarLink">
    <ResponseField name="name" type="string">
      The link label.

      Example: `"Contact us"`
    </ResponseField>

    <ResponseField name="url" type="string">
      The destination URL.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="topbarCtaButton" type="Call to Action">
  A call-to-action button in the top bar.

  <Expandable title="CTA Button">
    <ResponseField name="type" type={'"link" or "github"'} default="link">
      Display style. `"github"` shows repository star count.
    </ResponseField>

    <ResponseField name="url" type="string">
      The button's destination URL.
    </ResponseField>

    <ResponseField name="name" type="string">
      Button label text. Required when type is `"link"`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="versions" type="string[]">
  Version names for a version selector dropdown in the navigation bar.
</ResponseField>

<ResponseField name="api" type="API">
  Configuration for API playground settings.

  <Expandable title="API">
    <ResponseField name="baseUrl" type="string">
      The base URL for all API endpoints. Pass an array to enable multiple base URL options.
    </ResponseField>

    <ResponseField name="auth" type="Auth">
      <Expandable title="Auth">
        <ResponseField name="method" type="&#x22;bearer&#x22; | &#x22;basic&#x22; | &#x22;key&#x22;">
          Authentication strategy for API endpoints.
        </ResponseField>

        <ResponseField name="name" type="string">
          Name of the authentication parameter.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="openapi" type="string | string[]">
  URL(s) or relative path(s) to your OpenAPI specification file(s).

  Examples:

  <CodeGroup>
    ```json Absolute theme={null}
    "openapi": "https://api.ecge.dev/openapi.json"
    ```

    ```json Relative theme={null}
    "openapi": "/openapi.json"
    ```

    ```json Multiple theme={null}
    "openapi": ["/openapi-v1.json", "/openapi-v2.json"]
    ```
  </CodeGroup>
</ResponseField>

<ResponseField name="footerSocials" type="FooterSocials">
  Social media links displayed in the footer.

  Example:

  ```json theme={null}
  {
    "github": "https://github.com/ecge",
    "x": "https://x.com/ecge"
  }
  ```
</ResponseField>

<ResponseField name="modeToggle" type="ModeToggle">
  Dark mode toggle configuration.

  <Expandable title="ModeToggle">
    <ResponseField name="default" type={'"light" or "dark"'}>
      Default color mode for new visitors. Defaults to the user's OS preference.
    </ResponseField>

    <ResponseField name="isHidden" type="boolean" default="false">
      Set to `true` to hide the toggle and lock to the default mode.

      <CodeGroup>
        ```json Dark only theme={null}
        "modeToggle": {
          "default": "dark",
          "isHidden": true
        }
        ```

        ```json Light only theme={null}
        "modeToggle": {
          "default": "light",
          "isHidden": true
        }
        ```
      </CodeGroup>
    </ResponseField>
  </Expandable>
</ResponseField>