> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/en/concepts/customization.md](/docs/manual/en/concepts/customization.md).

---
title: Customization
description: Learn how to override built-in components in TockDocs to customize your documentation.
navigation:
  icon: i-lucide-pen-tool
---

TockDocs is built on top of Nuxt 4 which offers a flexible component layer system that allows you to override some part of the UI by redefining specific components in your own app. This makes it easy to fully customize the visual appearance and behavior of your documentation without touching the core theme.

To override a component, simply create a Vue file with the same name in the `components/` directory. TockDocs will automatically use your version instead of the default one.

## App Header

You can customize different parts of the header by overriding the following components:

### `AppHeaderLogo`

For simple adjustments like changing the logo size, you can use the `logo.class` option in `app.config.ts` without overriding the component (e.g. `class: 'h-8'`).

To fully replace the default logo in the header, create the `components/AppHeaderLogo.vue` file. Your component will replace the default one provided by TockDocs theme. You can use the `useLogoAssets()` composable to keep the right-click context menu with copy and download actions.

![App header logo visualisation](/documentation/app-header-logo.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppHeaderLogo.vue
variant: link
---
Default component code
::

### `AppHeaderLeft`

The logo sits inside a default home link wrapper. If you want to change that link (URL, attributes) or the layout around `AppHeaderLogo`, override `components/AppHeaderLeft.vue` instead.

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppHeaderLeft.vue
variant: link
---
Default component code
::

### `AppHeaderCTA`

To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the `components/AppHeaderCTA.vue` component.

![App header CTA visualisation](/documentation/app-header-cta.webp)

::note
---
to: https://github.com/taowang1993/tockdocs/blob/main/docs/app/components/AppHeaderCTA.vue
---
By default this components is empty but you can have a look at how we're overriding it on TockDocs documentation itself.
::

### `AppHeaderCenter`

To customize the center area in the header, override the `components/AppHeaderCenter.vue` component. Your component will replace the search bar provided by TockDocs theme.

![App header logo visualisation](/documentation/app-header-center.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppHeaderCenter.vue
variant: link
---
Default component code
::

### `AppHeaderBody`

By default, when you open the menu on mobile view, TockDocs is displaying your `content/` folder tree as a menu with the [ContentNavigation](https://ui.nuxt.com/components/content-navigation) component. You can override this menu with the `components/AppHeaderBody.vue` component and fill the menu body (under the header) in mobile.

![App header body visualisation](/documentation/app-header-body.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppHeaderBody.vue
variant: link
---
Default component code
::

### `AppHeaderBottomRight`

When [`navigation.sub`](/docs/manual/en/concepts/configuration#sub-navigation) is set to `'header'`, TockDocs renders a secondary tab bar below the header. To add custom content on the right side of this bar (e.g. a toggle, a badge), create a `components/AppHeaderBottomRight.vue` component.

::note
---
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppHeaderBottom.vue
---
To fully replace the sub navigation bar, override the `AppHeaderBottom.vue` component instead.
::

::tip{to="/docs/manual/en/concepts/nuxt"}
If you want to customize the header globally, maybe you should consider using your own layout.
::

## App Footer

You can customize different parts of the footer by overriding the following components:

### `AppFooterLeft`

To replace the left side of the footer, create the `components/AppFooterLeft.vue` file. Your component will replace the default one provided by TockDocs theme.

![App footer left visualisation](/documentation/app-footer-left.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppFooterLeft.vue
variant: link
---
Default component code
::

### `AppFooterRight`

To replace the right side of the footer, create the `components/AppFooterRight.vue` file. Your component will replace the default one provided by TockDocs theme.

![App footer right visualisation](/documentation/app-footer-right.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/blob/main/layer/app/components/app/AppFooterRight.vue
variant: link
---
Default component code
::

::tip{to="/docs/manual/en/concepts/nuxt"}
If you want to customize the footer globally, maybe you should consider using your own layout.
::

## Docs

You can also customize header and both asides of the documentation pages.

### `DocsPageHeaderLinks`

In the header right side of your documentation page, TockDocs default behaviour is displaying a dropdown with quick actions related to the current page’s Markdown source. It allows the reader of the documentation to:

- **Copy a direct link** to the raw `.md` file to the clipboard.
- **View the Markdown source** in a new browser tab.
- **Open the page’s content in ChatGPT or Claude**, pre-filled with a prompt to analyze the Markdown file.

These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own `components/DocsPageHeaderLinks.vue` component to override it.

![App Page Header Links](/documentation/app-page-header-links.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/tree/main/layer/app/components/docs/DocsPageHeaderLinks.vue
variant: link
---
Default component code
::

### `DocsAsideRight`

To fully replace the right aside of the documentation pages, create a `components/DocsAsideRight.vue` component.

![Docs right aside](/documentation/docs-aside-right.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/tree/main/layer/app/components/docs/DocsAsideRight.vue
variant: link
---
Default component code
::

### `DocsAsideRightBottom`

To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by TockDocs theme.

![Docs right aside bottom](/documentation/docs-aside-right-bottom.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/tree/main/layer/app/components/docs/DocsAsideRightBottom.vue
variant: link
---
Default component code
::

### `DocsAsideLeftTop`

To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.

![Docs Aside Left Top](/documentation/docs-aside-left-top.webp)

::note
---
to: https://github.com/nuxt/image/blob/main/docs/app/components/DocsAsideLeftTop.vue
---
By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
::

### `DocsAsideLeftBody`

To customize main part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component. Your component will replace the default file navigation provided by TockDocs theme.

![Docs aside left body visualisation](https://ptg90phsi6rf8j7h.public.blob.vercel-storage.com/documentation/docs-aside-left-body.webp)

::u-button
---
color: neutral
icon: i-lucide-code-xml
to: https://github.com/taowang1993/tockdocs/tree/main/layer/app/components/docs/DocsAsideLeftBody.vue
variant: link
---
Default component code
::

## Custom Icons

TockDocs uses [Nuxt Icon](https://github.com/nuxt/icon) with the [Iconify](https://iconify.design/) provider, giving you access to thousands of icons out of the box (e.g. `i-lucide-arrow-right`, `i-simple-icons-github`).

To add your own icons, place SVG files in the `assets/icons/` directory of your app. They are automatically registered under the `custom` prefix and available everywhere in your project.

```text
assets/
  icons/
    my-logo.svg
```

You can then use them with the `i-custom:` prefix:

```md [content/getting-started.md]
---
navigation:
  icon: i-custom:my-logo
---
```

```ts [app.config.ts]
export default defineAppConfig({
  toc: {
    bottom: {
      links: [
        {
          icon: 'i-custom:my-logo',
          label: 'Preview',
          to: '/preview',
        },
      ],
    },
  },
})
```

```vue [components/MyComponent.vue]
<template>
  <UIcon name="i-custom:my-logo" />
</template>
```

::tip{to="https://iconify.design/docs/icons/icon-set-basics.html"}
SVG files should use `currentColor` for fills and strokes so the icon adapts to text color.
::