Overriding

shadcn-docs-nuxt is a Nuxt Layer. You can override any component in shadcn-docs-nuxt by creating a custom vue component in your project with the same path as the original component. Make sure that your component contains the same props as the original component.

Here is a brief showcase of the components/ folder in shadcn-docs-nuxt.

components/
├── layout/             # Layout components (headers)
│   ├── Header.vue
│   ├── Footer.vue
│   └── ...
├── content/            # Prose components and mdc components
│   ├── Accordion.vue
│   ├── Alert.vue
│   ├── ProseCode.vue
│   └── ...
└── ui/                 # shadcn-vue components
    ├── button/
    ├── card/
    └── ...

For example, if you want to override the Footer component, create /components/layout/Footer.vue in your project root.

<template>
  <footer class="py-6 text-muted-foreground md:px-8 md:py-0">
    <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
      My footer
      <span class="flex-1" />
      {{ footer.credits }}
    </div>
  </footer>
</template>

<script setup lang="ts">
const { footer } = useConfig().value;
</script>